web-dev-qa-db-ja.com

テキストボックス内のテキストが選択されているかどうかを知る方法は？

テキストボックスがあります<input type='text'>数字のみを許可し、ユーザーがドット（。）を複数回入力できないようにします。問題は、テキストボックス内のテキストが選択されている場合、ユーザーがコンテンツをドットで上書きすることを意図しているため、許可されることです！問題は、そのテキストボックス内のテキストが選択されているかどうかをJavaScriptでどのように判断できるかです。

ありがとう

javascriptjqueryinputtextbox
41
Jimbo

以下は、すべての主要なブラウザーのテキスト入力内ですべてのテキストが選択されているかどうかを示します。

例： 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;
    }
}
54
Tim Down

2017 Specific Answer-最近同じ問題に直面しました。

ユーザーは一度に3桁しか入力できませんでした。ユーザーが4番目の文字を入力しようとしたときに、falseを返しました。

これは、ユーザーに選択があり、値を上書きしようとしたときに問題になりました。

ティムの答えからヒントを得る。 selection valueがinput's valueと同じかどうかを確認したいことを理解しました。

最新のブラウザでは、次のことを実行して達成しました。

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

これが誰かを助けることを願っています。

4
Sunny R Gupta

数字のドットと選択の壁にぶつかる代わりに、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/

2
Shadow Wizard

テキストボックス内の選択されたテキストを取得するコードを必要とする人のために、ここに拡張版があります：

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;
}
2
Mr_CSharp

次のコードを使用して、ページで選択した要素のIDを取得できます。

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