使用 jQuery 在输入框中选择部分字符串

IT技术 javascript jquery
2021-01-28 01:57:07

我想弄清楚如何使用 jQuery 突出显示输入框中的部分文本。突出显示输入框的全部内容非常简单,但是如何突出显示一个单词或几个字母?

谢谢!

2个回答

对于文本<input>元素,以下将完成这项工作。该示例仅选择输入中的单词“two”:

function setInputSelection(input, startPos, endPos) {
    input.focus();
    if (typeof input.selectionStart != "undefined") {
        input.selectionStart = startPos;
        input.selectionEnd = endPos;
    } else if (document.selection && document.selection.createRange) {
        // IE branch
        input.select();
        var range = document.selection.createRange();
        range.collapse(true);
        range.moveEnd("character", endPos);
        range.moveStart("character", startPos);
        range.select();
    }
}

document.getElementById("setSelection").onmousedown = function() {
    var input = document.getElementById("i");
    setInputSelection(input, 4, 7);
    return false;
};
<input id="i" type="text" value="One two three">
<input type="button" value="Set selection" id="setSelection">

老实说,我知道这不是教育评论,但是来吧 IE,真的!!7 行代码与 2 行代码相比。当然,您的方式可能会添加更多功能,但没有必要。谢谢蒂姆提供这个例子!
2021-03-17 01:57:07
@vatavale:主要代码在未来很多年都可以正常工作,但 jsFiddle 存在焦点问题。我已将其更改为使用代码片段,并添加了一个按钮来设置选择。
2021-03-26 01:57:07
@JasonFoglia:在文本区域中的旧 IE 中可靠地执行此操作的代码,其中可能有空行,但仍然要大得多公平地说,IE 9 通过支持selectionStartselectionEnd.
2021-04-02 01:57:07
我知道这是旧的,但 Firefoxinput.focus();之前需要这个input.selectionStart = startPos;
2021-04-05 01:57:07
@BojanDević:由于 textareas 可以有选择,但在某些浏览器中不集中,我倾向于尝试将这两件事分开,但我想我同意你的这个问题。
2021-04-09 01:57:07

您需要选择整个值,然后在代码中操作字符串。根据您尝试对单词执行的操作,您可能会考虑使用正则表达式来匹配某些单词/字母。

您的代码如何突出显示输入文本框内的一部分文本?
2021-04-04 01:57:07