Question

我在页面上有一个文本区域和一个调用功能的按钮，该功能突出显示页面上div中的文本。但是，如果我更改框中的文本，则不会突出显示新文本。如何让这个按钮多次运行该功能？代码如下：

<script>

function highlight(text)
{
    inputText = document.getElementById("inputText")
    var innerHTML = inputText.innerHTML
    var index = innerHTML.indexOf(text);
    if ( index >= 0 )
    {
        innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length);
        inputText.innerHTML = innerHTML
    }

}


</script>

@Html.TextArea("area")
<button onclick="highlight(document.getElementById('area').value)">Highlight</button>

<style>
    .highlight {
        background-color: yellow;
    }
</style>

<div id="inputText">
    The fox went over the fence
</div>

Answer 1

只需使用textarea onkeyup事件，当您输入新的char时，只需调出textarea内容的高亮显示即可。所以这不是按钮点击事件。

按下按钮会多次触发onclick事件

1 个答案: