輸入文本的突出顯示部分

Question

是否有任何變化讓輸入元素類似我的屏幕截圖。

在此處輸入圖片說明

我想通過javascript更改值，並用*突出顯示帶有不同顏色的部分文字，

謝謝你的幫助。

Answer 1

您不能使用輸入元素來執行此操作。 這是一種選擇：

<!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>

這是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