用彩色文本替換textfield中的文本，jquery

我有一個填充值爲textfield的文本框。它包含'XXXX'，我想只突出顯示'XXXX'，這樣用戶就可以注意到XXXX必須被值替換。我怎樣才能獲得價值，只取得'XXXX'並用相同的價值取而代之，但是彩色。用彩色文本替換textfield中的文本，jquery

來源

2016-08-23 moody

的可能的複製[？有沒有一種方法來輸入字段的值的樣式的一部分（http://stackoverflow.com/questions/3121683/is-there-a-way-style-part-of-an-input-fields-value） – Dekel

好吧。有沒有一種突出文本框的好方法，讓用戶注意到它？我不想在文本字段的末尾使用星號或爲背景着色。 – moody

您不能爲textfield文本的一部分設置一些css屬性。您可以使用'div'或'p'元素來代替'contenteditable'屬性。 – Mohammad

您可以使用div元素：

<html> 
 
    <title>This is test</title> 
 
    <head> 
 
     <style> 
 
      .highlight { 
 
       background-color: yellow; 
 
      } 
 
      div { 
 
        -moz-appearance: textfield; 
 
        -webkit-appearance: textfield; 
 
        background-color: white; 
 
        background-color: -moz-field; 
 
        border: 1px solid darkgray; 
 
        box-shadow: 1px 1px 1px 0 lightgray inset; 
 
        font: -moz-field; 
 
        font: -webkit-small-control; 
 
        margin-top: 5px; 
 
        padding: 2px 3px; 
 
        width: 398px;  
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="txt" contenteditable="true"> I am XXXX.</div> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 

 
      $(document).ready(function(){ 
 

 
       $txt = $(".txt").text(); 
 

 
       $newTxt = $txt.replace(/XXXX/gi,"<span class=highlight>XXXX</span>"); 
 

 
       $(".txt").html($newTxt); 
 

 
      }) 
 
     </script> 
 
    </body> 
 
</html>

來源

2016-08-23 13:33:26 Ehsan

請注意，從[兼容性頁面]（http://caniuse.com/#feat=css-appearance）開始，IE不支持！ – dude

用彩色文本替換textfield中的文本，jquery

回答

相關問題