Question

我的文本框<input type='text'>只允许使用数字字符，并且不会让用户多次输入点（。）。问题是，如果选中文本框中的文本，则用户打算用点覆盖内容，从而允许它！问题是，如何在javascript中判断该文本框中的文本是否被选中。

由于

Answer 1

以下内容将告诉您是否在所有主流浏览器的文本输入中选择了所有文本。

示例：http://www.jsfiddle.net/9Q23E/

代码：

function isTextSelected(input) {
    if (typeof input.selectionStart == "number") {
        return input.selectionStart == 0 && input.selectionEnd == input.value.length;
    } else if (typeof document.selection != "undefined") {
        input.focus();
        return document.selection.createRange().text == input.value;
    }
}

Answer 2

通过检查onchange事件中的值，您可以轻松攀爬数字点和选区的墙壁。

HTML：

<input type="text" onchange="ValidateNumericValue(this);" />

JS：

function ValidateNumericValue(oInput) {
    var blnRequired = true; //set to false if allowing empty value

    var sValue = oInput.value;
    if (blnRequired && sValue.length == 0) {
        alert("Please enter a value");
        oInput.focus();
        return;
    }

    var numericValue = parseFloat(sValue);
    if (isNaN(numericValue)) {
        alert("Value is not a valid number");
        oInput.focus();
        return;
    }

    //put back to make 2.15A back to 2.15
    oInput.value = numericValue + "";
}

这将在更改时检查值（并且用户转到不同的元素），当无效时将提醒并设置焦点。

实时测试案例：http://jsfiddle.net/yahavbr/NFhay/

Answer 3

对于需要代码来获取文本框中所选文本的任何人，这里有一个增强版本：

http://jsfiddle.net/9Q23E/527/

function getSelection(textbox) 
{
   var selectedText = null;
   var activeElement = document.activeElement;

   // all browsers (including IE9 and up), except IE before version 9 
   if(window.getSelection && activeElement && 
      (activeElement.tagName.toLowerCase() == "textarea" || (activeElement.tagName.toLowerCase() == "input" && activeElement.type.toLowerCase() == "text")) &&
      activeElement === textbox) 
   {
      var startIndex = textbox.selectionStart;
      var endIndex = textbox.selectionEnd;

      if(endIndex - startIndex > 0)
      {
          var text = textbox.value;
          selectedText = text.substring(textbox.selectionStart, textbox.selectionEnd);
      }
   }
   else if (document.selection && document.selection.type == "Text" &&  document.selection.createRange) // All Internet Explorer
   {       
       var range = document.selection.createRange();
       selectedText = range.text;
   }    

    return selectedText;
}

Answer 4

2017年具体答案 - 最近面临同样的问题。

我们允许用户一次只输入3位数字。当用户试图输入第四个字符时，我们返回false。

当用户进行选择并试图覆盖这些值时，这就成了一个问题。

从蒂姆的回答中得到一个暗示。我了解到我想知道selection value是否与input's value相同。

在现代浏览器中，我通过以下方式实现了它：

document.getSelection().toString() === input.value // edited

希望这有助于某人。

Answer 5

您可以使用以下代码获取页面中所选元素的ID：

elem_offset = document.getSelection().anchorOffset;
elem = document.getSelection().anchorNode.childNodes[elem_offset];
alert(elem.id);

如何知道文本框中的文本是否被选中？

5 个答案: