如何在输入框中突出显示文本的子集?

I'm trying to figure out if it's possible using Javascript to highlight a specific range of data in a text field.

我试图弄清楚是否可以使用Javascript在文本字段中突出显示特定范围的数据。

textfield.select();

That ^^ works to select the entire text, but for all my googling I haven't stumbled upon a way to select, for example, characters 2 through 10 of the entered text. Is this possible?

,^ ^作品选择整个文本,但是对于我所有的google我没有偶然发现了一种选择,例如,字符2到10的输入文本。这是可能的吗?

3 个解决方案

#1

This is handled differently with IE vs everyone else.

IE和其他人的处理方式不同。

Here is a reference guide with examples:

以下是一些例子的参考指南:

http://www.sxlist.com/techref/language/html/ib/Scripting_Reference/trange.htm

#2

I think there is a very IE-specific way to do it that involves TextRange objects.

我认为有一种非常特殊的方式来做它涉及到TextRange对象。

Here's some documentation on the TextRange object.

这里有一些关于TextRange对象的文档。

After posting I realized that this might only work on a textarea.

在发布之后，我意识到这可能只适用于文本区域。

#3

This object will let you get, set & modify the selected region of a text box.

该对象将允许您获取、设置和修改文本框的选定区域。

function SelectedText(input) {
  // Replace the currently selected text with the given value.
  this.replace = function(text) {
    var selection = this.get();

    var pre = input.value.substring(0, selection.start);
    var post = input.value.substring(selection.end, input.value.length);

    input.value = pre + text + post;

    this.set(selection.start, selection.start + text.length);

    return this;
  }

  // Set the current selection to the given start and end points.
  this.set = function(start, end) {
    if (input.setSelectionRange) {
      // Mozilla
      input.focus();
      input.setSelectionRange(start, end);
    } else if (input.createTextRange) {
      // IE
      var range = input.createTextRange();
      range.collapse(true);
      range.moveEnd('character', end);
      range.moveStart('character', start);
      range.select();
    }

    return this;
  }

  // Get the currently selected region.
  this.get = function() {
    var result = new Object();

    result.start = 0;
    result.end = 0;
    result.text = '';

    if (input.selectionStart != undefined) {
      // Mozilla
      result.start = input.selectionStart;
      result.end = input.selectionEnd;
    } else {
      // IE
      var bookmark = document.selection.createRange().getBookmark()
      var selection = inputBox.createTextRange()
      selection.moveToBookmark(bookmark)

      var before = inputBox.createTextRange()
      before.collapse(true)
      before.setEndPoint("EndToStart", selection)

      result.start = before.text.length;
      result.end = before.text.length + selection.text.length;
    }

    result.text = input.value.substring(result.start, result.end);

    return result;
  }
}

#1