テキストフィールドのテキストを色付きのテキストに置き換えます。jquery

私は値が入力されたテキストフィールドを持っています。それには「XXXX」が含まれていて、「XXXX」だけを強調したいので、XXXXを値に置き換えなければならないことに気付くことができます。どのようにして値を取得し、 'XXXX'だけを取り出し、同じ値に置き換えても色を付けることができます。テキストフィールドのテキストを色付きのテキストに置き換えます。jquery

出典

2016-08-23 moody

可能な重複が[？入力フィールドの値のスタイルの一部に方法はあり]（http://stackoverflow.com/questions/3121683/is-there-a-way-to-style-part-of-a-input-fields-value） – Dekel

大丈夫です。テキストフィールドを強調表示する良い方法があるので、ユーザーはそれに気づくでしょうか？私は、テキストフィールドの最後に星を使用したり、背景を色づけしたりしたくありません。 – moody

テキストフィールドのテキストの一部に対して、一部のCSSプロパティを設定することはできません。 'div'または' p'要素に 'contenteditable'属性が代わりに使用できます。 – Mohammad

あなたが使用することができ本部要素：

<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

テキストフィールドのテキストを色付きのテキストに置き換えます。jquery

答えて

関連する問題