使用 jQuery 选择器和 setSelectionRange 不是函数

Posted

技术标签:

【中文标题】使用 jQuery 选择器和 setSelectionRange 不是函数【英文标题】:Using jQuery selector and setSelectionRange is not a function 【发布时间】:2013-06-14 01:44:58 【问题描述】:

我在下面组装了一个基本的 jfiddle。出于某种原因,我的选择器可以检索 textarea 框以设置值,但选择器无法使用 setSelectionRange 函数。在控制台上,您会发现 .setSelectionRange is not a function 的错误。

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

代码(请参考jfiddle): selector.setSelectionRange(carat,carat);

【问题讨论】:

【参考方案1】:

setSelectionRange(carat,carat) 不是 jquery 对象的方法。您想在 DOM 元素上使用它。所以试试:

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

见Reference

Fiddle

【讨论】:

如果能解决您的问题,请标记为正确答案 即使在小提琴中,我仍然会得到“selector.setSelectionRange 不是函数”。我正在使用铬。【参考方案2】:

对我来说这是一个很好的解决方案

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

但我想再补充一件事。我注意到setSelectionRange 是在元素获得焦点后异步变为可用的东西。

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

你也可以选择使用:

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

【讨论】:

【参考方案3】:

html

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

查询:

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();

检查:

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

【讨论】:

【参考方案4】:

你可以试试这个对我有用的。我用它从单独的地址字段中构建一个地址,然后复制粘贴。

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>

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;
           

【讨论】:

以上是关于使用 jQuery 选择器和 setSelectionRange 不是函数的主要内容,如果未能解决你的问题,请参考以下文章

jQuery选择器和选取方法

jQuery选择器和选取方法

是否可以使用 jQuery 混合多个选择器和过滤器?

对动态元素使用 JQuery 选择器和“this”

jQuery选择器和选取方法.RP

对于jQuery选择器和动画效果停止动画的实战心得前端jQuery框架