输入文本的突出显示部分

Question

Is there any change to have input element similar like is on my screenshot. 是否有任何变化让输入元素类似我的屏幕截图。

在此处输入图片说明

I would like to change value via javascript and highlight part of text with different color if it will be wrapped with * 我想通过javascript更改值，并用*突出显示带有不同颜色的部分文字，

Thanks for any help. 谢谢你的帮助。

Answer 1

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 这是JS Bin示例

输入文本的突出显示部分

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-06-11 19:09:22

输入文本的突出显示部分

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-06-11 19:09:22

解决方案1
1 已采纳 2015-06-11 19:09:22