moody moody - 1 year ago 74
HTML Question

replace text in textfield with colored text, jquery

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.

Answer Source

You can use Div Element :

    <title>This is test</title>
            .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;    
        <div class="txt" contenteditable="true"> I am XXXX.</div>
        <script src=""></script>


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

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



Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download