zoukankan      html  css  js  c++  java
  • jQuery设置聚焦并使光标位置在文字最后

    遇到一个问题:表单输入框设置了文字,然后使用jQuery的焦点停留设置办法focus()进行处理。结果发现光标位置在firefox下停留的位置不对——停留在文字的最前边!

    只有IE浏览器下是正常的。这样的话肯定是不行的,于是想办法进行处理。

    代码有很多种,下面给出:

    方法一:

    [javascript] view plain copy
     
    1. function setSelectionRange(input, selectionStart, selectionEnd) {  
    2.   if (input.setSelectionRange) {  
    3.     input.focus();  
    4.     input.setSelectionRange(selectionStart, selectionEnd);  
    5.   }  
    6.   else if (input.createTextRange) {  
    7.     var range = input.createTextRange();  
    8.     range.collapse(true);  
    9.     range.moveEnd('character', selectionEnd);  
    10.     range.moveStart('character', selectionStart);  
    11.     range.select();  
    12.   }  
    13. }  
    14.   
    15. function setCaretToPos (input, pos) {  
    16.   setSelectionRange(input, pos, pos);  
    17. }  

    调用办法:setCaretToPos(document.getElementById("YOURINPUT"), 4);

    方法二:

    [javascript] view plain copy
     
    1. $.fn.selectRange = function(start, end) {  
    2.     return this.each(function() {  
    3.         if (this.setSelectionRange) {  
    4.             this.focus();  
    5.             this.setSelectionRange(start, end);  
    6.         } else if (this.createTextRange) {  
    7.             var range = this.createTextRange();  
    8.             range.collapse(true);  
    9.             range.moveEnd('character', end);  
    10.             range.moveStart('character', start);  
    11.             range.select();  
    12.         }  
    13.     });  
    14. };  

    调用办法:$('#elem').selectRange(3,5);

    方法三:

    [javascript] view plain copy
     
    1. $.fn.setCursorPosition = function(position){  
    2.     if(this.lengh == 0) return this;  
    3.     return $(this).setSelection(position, position);  
    4. }  
    5.   
    6. $.fn.setSelection = function(selectionStart, selectionEnd) {  
    7.     if(this.lengh == 0) return this;  
    8.     input = this[0];  
    9.   
    10.     if (input.createTextRange) {  
    11.         var range = input.createTextRange();  
    12.         range.collapse(true);  
    13.         range.moveEnd('character', selectionEnd);  
    14.         range.moveStart('character', selectionStart);  
    15.         range.select();  
    16.     } else if (input.setSelectionRange) {  
    17.         input.focus();  
    18.         input.setSelectionRange(selectionStart, selectionEnd);  
    19.     }  
    20.   
    21.     return this;  
    22. }  
    23.   
    24. $.fn.focusEnd = function(){  
    25.     this.setCursorPosition(this.val().length);  
    26. }  


    调用办法:$(element).focusEnd();

  • 相关阅读:
    BZOJ4644 经典傻逼题 (线段树分治+可撤销线性基+Xor)
    CF678E Another Sith Tournament(思维+dp)
    HDU 6511
    HDU6513 Reverse It(容斥+Cnk)
    一篇最浅显易懂的Splay讲解(试问谁能比我的更易懂
    [CTSC2016]时空旅行 (线段树分治+凸壳
    关于dsu on tree 和一些例题 CF 741 D
    关于区间开根号+区间询问
    [FJOI2015]火星商店问题 --线段树分治+可持久化trie
    线段树 关于pushup的技巧
  • 原文地址:https://www.cnblogs.com/ps-blog/p/7279966.html
Copyright © 2011-2022 走看看