JQuery/JavaScript-突出显示输入或文本区域中的一部分文本

可能重复：

有人知道如何突出显示

input[type=text]

或

textarea

中的某些文本吗？

---

可能吗？

此代码片段向您展示了如何：

window.onload = function() {
    var message = document.getElementById('message');
    // Select a portion of text
    createSelection(message, 0, 5);

    // get the selected portion of text
    var selectedText = message.value.substring(message.selectionStart, message.selectionEnd);
    alert(selectedText);
};

function createSelection(field, start, end) {
    if( field.createTextRange ) {
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end);
        selRange.select();
    } else if( field.setSelectionRange ) {
        field.setSelectionRange(start, end);
    } else if( field.selectionStart ) {
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
}       

---

此代码段向您展示了如何：

window.onload = function() {
    var message = document.getElementById('message');
    // Select a portion of text
    createSelection(message, 0, 5);

    // get the selected portion of text
    var selectedText = message.value.substring(message.selectionStart, message.selectionEnd);
    alert(selectedText);
};

function createSelection(field, start, end) {
    if( field.createTextRange ) {
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end);
        selRange.select();
    } else if( field.setSelectionRange ) {
        field.setSelectionRange(start, end);
    } else if( field.selectionStart ) {
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
}       

---

您必须在

textarea

后面放置一个

div

，然后根据其文本设置样式。
注释：

• 将

  文本区域

  背景色

  设置为透明，以查看您的

  荧光灯

  颜色
• 您的

  荧光笔

  必须与

  text区域

  的样式和文本内容相同，才能将

  span

  放在正确的位置
• 将您的

  荧光笔

  文本设置为与背景相同的颜色，否则您将看到
  效果，与

  span

  效果相同

html：

<div class="highlighter">some text <span>highlighted</span> some text</div>
<textarea>some text highlighted some text</textarea>

.highlighter, textarea {
    width: 400px;
    height: 300px;
    font-size: 10pt;
    font-family: 'verdana';
}

.highlighter {
    position: absolute;
    padding: 1px;
    margin-left: 1px;
    color: white;
}

.highlighter span {
    background: red;
    color: red;
}

textarea {
    position: relative;
    background-color: transparent;
}

---

您必须在

文本区域后面放置
div
，然后根据其文本设置样式。

注释：


将
文本区域
背景色
设置为透明，以查看您的
荧光灯
颜色
您的
荧光笔
必须与
text区域
的样式和文本内容相同，才能将
span
放在正确的位置
将您的
荧光笔
文本设置为与背景相同的颜色，否则您将看到
效果，与
span
效果相同

html：

<div class="highlighter">some text <span>highlighted</span> some text</div>
<textarea>some text highlighted some text</textarea>

.highlighter, textarea {
    width: 400px;
    height: 300px;
    font-size: 10pt;
    font-family: 'verdana';
}

.highlighter {
    position: absolute;
    padding: 1px;
    margin-left: 1px;
    color: white;
}

.highlighter span {
    background: red;
    color: red;
}

textarea {
    position: relative;
    background-color: transparent;
}

您所说的“突出显示文本”到底是什么意思？只是用不同的颜色或者选择文本？我已经尝试用背景色样式的元素替换文本，我想突出显示文本。但是，在输入之后，如果您只想选择文本，请使用此
$（'input[type=text]'）。选择（）
，或者如果您需要背景突出显示，请使用
$（'input[type=text]'）。css（'background-color'，'FF0'））
@Felix Kling我只想为部分输入设置背景色text@Mirek我的答案在点击按钮后立即突出显示文本。如果您想在输入时突出显示它，只需使用
css
样式，如
color
和
background color
您所说的“突出显示文本”到底是什么意思？只是用不同的颜色或者选择文本？我已经尝试用背景色样式的元素替换文本，我想突出显示文本。但是，在输入之后，如果您只想选择文本，请使用此
$（'input[type=text]'）。选择（）
，或者如果您需要背景突出显示，请使用
$（'input[type=text]'）。css（'background-color'，'FF0'））
@Felix Kling我只想为部分输入设置背景色text@Mirek我的答案在点击按钮后立即突出显示文本。如果您想在输入时突出显示它，只需使用
css
样式，如
color
和
background color
谢谢，这是我需要的：）但只有在textarea没有滚动条时它才能正常工作bars@Mirek是的，我知道，当你滚动textarea时，你必须做一些变通来将highlighter一起滚动。如果你想以插件的形式（这也适用于滚动条），请检查：谢谢，这是我需要的：），但只有当textarea没有滚动条时，它才能正常工作bars@Mirek是的，我知道，当您滚动文本区域时，您必须进行一些变通，以便将highlighter一起滚动。如果您希望使用插件形式（也适用于滚动条），请查看：