0

Is there any change to have input element similar like is on my screenshot.

enter image description here

I would like to change value via javascript and highlight part of text with different color if it will be wrapped with *

Thanks for any help.

2
  • 1
    what control you are using?
    – Emmanuel N
    Jun 11, 2015 at 18:37
  • This is devexpress aspxtextbox but it can be html input element. It needs to be something where I can write text. Can't use label.
    – tonco
    Jun 11, 2015 at 18:39

1 Answer 1

2

You cannot do it with an input element. Here is one alternative:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    /*style it to look like input element*/
    [contenteditable] {
        border: 1px solid gray;
    } 
  </style>
</head>
<body>
<div id="contentDiv" contenteditable>sdfsdtokendfdfsdfs</div>
<br/>
<input type="button" onclick="test()" value="Click me"/>
<script type="text/javascript">
function test() {
    // this is our token
    var valueToSelect = "tokendfdf";
    var contentDiv = document.getElementById('contentDiv');

    // check if div contains wanted token
    if (contentDiv.innerHTML.indexOf(valueToSelect) >= 0) {
        // create span with wanted color
        var replaceString = '<span style="color: red">*' + valueToSelect + '*</span>';
        // replace the string with colored span
        contentDiv.innerHTML = contentDiv.innerHTML.replace(valueToSelect, replaceString);
    }   
}
</script>
</body>
</html>

Here is JS Bin example

1
  • you're rock - this is what I'm looking for
    – tonco
    Jun 11, 2015 at 19:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.