web-dev-qa-db-fra.com

Comment savoir si le texte d'une zone de texte est sélectionné?

J'ai des zones de texte <input type='text'> qui n'autorise que les caractères numériques et ne permet pas à l'utilisateur d'entrer un point (.) plus d'une fois. Le problème est que si le texte dans la zone de texte est sélectionné, l'utilisateur a l'intention d'écraser le contenu avec un point, ce qui le rend autorisé! La question est, comment savoir en javascript si le texte de cette zone de texte est sélectionné ou non.

Merci

javascriptjqueryinputtextbox
43
Jimbo

Ce qui suit vous indiquera si tout le texte est sélectionné dans une entrée de texte dans tous les principaux navigateurs.

Exemple: http://www.jsfiddle.net/9Q23E/

Code:

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;
    }
}
56
Tim Down

Réponse spécifique 2017 - J'ai récemment rencontré le même problème.

Nous permettions aux utilisateurs de saisir seulement 3 chiffres à la fois. Lorsque l'utilisateur a tenté de saisir le quatrième caractère, nous avons renvoyé false.

Cela est devenu un problème lorsque l'utilisateur avait une sélection et tentait d'écraser les valeurs.

Prenant un indice de la réponse de Tim. J'ai compris que je voulais voir si le selection value était le même que le input's value.

Dans les navigateurs modernes, je l'ai réalisé en faisant:

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

J'espère que cela aide quelqu'un.

8
Sunny R Gupta

Au lieu de frapper le mur de points et de sélections de chiffres, vous pouvez l'escalader facilement en vérifiant la valeur dans l'événement 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 + "";
}

Cela vérifiera la valeur lorsqu'elle est modifiée (et l'utilisateur passe à un élément différent) et lorsqu'elle n'est pas valide, alerte et rétablit le focus.

Cas de test en direct: http://jsfiddle.net/yahavbr/NFhay/

2
Shadow Wizard is Ear For You

Pour toute personne qui a besoin du code pour accéder au texte sélectionné dans une zone de texte, voici une version améliorée:

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

Vous pouvez obtenir l'id de l'élément sélectionné dans la page avec le code suivant:

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