IE8瀏覽器下，設定span標籤內容無效

weixin_33766168發表於2018-05-02
瀏覽器

問題描述

我們專案中，有個需求是往輸入框後面新增紅色字型提示，然後因為前端頁面程式碼都是自動拼接字串產生的，所以導致多了一個" 號，Chrome瀏覽器、IE11瀏覽器上都沒有問題，在IE8瀏覽器下，通過js動態設定提示問題失效。
示例程式碼如下（請自行引入jquery）

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("[uid='pspan-C7F8874F9FF00001472C51CB116B12DF']").text("123123");
    });
</script>
</head>
<body>
    <table>
        <tr>
            <td class="content" uid="content-C7F8874F9FF00001472C51CB116B12DF">
                <input type="text" uid="C7F8874F9FF00001472C51CB116B12DF" id="TEST" name="TEST" ">
                <span uid="pspan-C7F8874F9FF00001472C51CB116B12DF" style="display:inline-block; color:red;"> </span>
            </td>
        </tr>
    </table>
</body>
</html>

注意程式碼中，input標籤後面多加了一個"號，導致通過js動態設定後面span標籤的文字失效。

解決方案

定位該問題破費了一段時間，因為網上沒有相關介紹，這個問題純屬個人編碼問題。
除錯過程中，在Chrome瀏覽器下，審查元素髮現input標籤有點異常，所以列印拼接的html字串，發現後面多了一個" 號，然後又寫了上面的示例程式進行驗證。

特別說明

無。

參考連結

無。

相關文章