0

I have a textfield with filled value. It contains 'XXXX' and i would like to highlight only the 'XXXX' so the user can notice, that the XXXX must be replaced by a value. How can I get the value, take only the 'XXXX' and replaced it with the same value, but colored.

moody
  • 404
  • 7
  • 19
  • 2
    Possible duplicate of [Is there a way to style part of an input field's value?](http://stackoverflow.com/questions/3121683/is-there-a-way-to-style-part-of-an-input-fields-value) – Dekel Aug 23 '16 at 13:05
  • okay. is there a good way to highlight the textfield, so the user notice it? i dont want to use a star at the end of the textfield or color the background. – moody Aug 23 '16 at 13:12
  • You can't set some css property for a part of text of textfield. You can use `div` or `p` element has `contenteditable` attribute instead. – Mohammad Aug 23 '16 at 13:14

1 Answers1

0

You can use Div Element :

<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>
Ehsan
  • 12,655
  • 3
  • 25
  • 44
  • Note that this isn't supported in IE as of [the compatibility page](http://caniuse.com/#feat=css-appearance)! – dude Aug 23 '16 at 16:51