web-dev-qa-db-fra.com

Utiliser jQuery selector et setSelectionRange n'est pas une fonction

J'ai assemblé un jfiddle basique ci-dessous. Pour une raison quelconque, mon sélecteur récupère la zone de texte pour définir la valeur, mais le sélecteur ne fonctionne pas avec la fonction setSelectionRange. Sur la console, vous trouverez une erreur pour .setSelectionRange n'est pas une fonction.

http://jsfiddle.net/dMdHQ/6/

code (veuillez vous référer à jfiddle): selector.setSelectionRange(carat,carat);

javascriptjquerytextarea
16
srg2k5

setSelectionRange(carat,carat) n'est pas une méthode sur un objet jQuery. Vous voulez l'utiliser sur l'élément DOM. Alors essayez:

selector[0].setSelectionRange(carat,carat); //use `[0]` or .get(0) on the jquery object

Voir Référence

Fiddle

38
PSL

HTML:

<input type="search" value="Potato Pancakes" id="search">

JQUERY:

jQuery.fn.putCursorAtEnd = function() {

  return this.each(function() {

    $(this).focus()

    // If this function exists...
    if (this.setSelectionRange) {
      // ... then use it (Doesn't work in IE)

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
      var len = $(this).val().length * 2;

      this.setSelectionRange(len, len);

    } else {
    // ... otherwise replace the contents with itself
    // (Doesn't work in Google Chrome)

      $(this).val($(this).val());

    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Google Chrome)
    this.scrollTop = 999999;

  });

};

$("#search").putCursorAtEnd();

Vérifier:

http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

2
KingRider

Pour moi c'est une bonne solution

selector[0].setSelectionRange(start ,end);

Mais je voudrais ajouter une dernière chose. J'ai remarqué que setSelectionRange est quelque chose qui devient disponible de manière asynchrone après que l'élément ait obtenu le focus.

var element = selector[0];
element.addEventListener('focus', function() {
   element.setSelectionRange(start, end); 
});
element.focus();

Aussi, vous pouvez utiliser alternativement:

element.selectionStart = start;
element.selectionEnd = end;
0
Prusdrum

Vous pouvez essayer ce qui fonctionne pour moi. Je l'utilise pour construire une adresse à partir des champs d'adresse séparés, puis faire la copie pour le coller.

Le HTML 

<div id="d_clip_container" style="position:relative">
    (<a href="#" id="d_clip_button">copy to clipboard</a>)
</div>;
<textarea id="clip" rows="0" cols="0" style="border:none;height:0;width:0;"></textarea>

Le jQuery 

    $(document).ready(function() {

        $('#d_clip_button').click(function() {
            //get all the values of needed elements
            var fName = $("#firstName").val();
            var lName = $("#lastName").val();
            var address = $("#Address").val();
            var city = $("#City").val();
            var state = $("#State").val();
            var Zip = $("#Zip").val();
            //concatenate and set "clip" field with needed content
            $('#clip').val(fName + " " + lName + "\n" + address + "\n" + city + ", " + state + " " + Zip);

            //Do it
            if(copyToClipboard('#clip')) {
                alert('text copied');
            } else {
                alert('copy failed');
            }
        });
    });

    function copyToClipboard(elem) {
        // set focus to hidden element and select the content
        $(elem).focus();
        // select all the text therein  
        $(elem).select();

        var succeed;
        try {
            succeed = document.execCommand("copy");
        } catch(e) {
            succeed = false;
        }

        // clear temporary content
        $(target).val('');

        return succeed;
    }
0
Outside Edge