Как узнать, выделен ли текст в текстовом поле?

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

Специальный ответ на 2017 год - Недавно столкнулся с той же проблемой.

Мы позволяли пользователям вводить только 3 цифры одновременно. Когда пользователь попытался ввести четвертый символ, мы вернули false.

Это стало проблемой, когда пользователь выбрал и пытался перезаписать значения.

Получив подсказку от ответа Тима. Я понял, что хотел бы узнать, был ли selection value такой же, как input's value.

В современных браузерах я достиг этого, выполнив:

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

Надеюсь, это кому-нибудь поможет.

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

Вместо того, чтобы поразить стену цифр точек и выделений, вы можете легко подняться на нее, проверив значение в событии 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 5

Вы можете получить идентификатор выбранного элемента на странице со следующим кодом:

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