光标输入框定位和获取位置

最新推荐文章于 2023-06-27 10:02:46 发布

web前端执行者

最新推荐文章于 2023-06-27 10:02:46 发布

阅读量3.9k

点赞数

文章标签：光标定位光标输入框定位光标输入框定位的设置

本文链接：https://blog.csdn.net/zhxh0376/article/details/49125313

版权

应用场景，这指定的输入框中不同的文本位置，插入标识符。

核心代码

//光标定位的处理jquery-position.js中的核心代码

$.fn.extend({
    position:function( value ){
        var elem = this[0];
        if (elem&&(elem.tagName=="TEXTAREA"||elem.type.toLowerCase()=="text")) {
            if($.browser.msie){
                var rng;
                if(elem.tagName == "TEXTAREA"){
                    rng = event.srcElement.createTextRange();
                    rng.moveToPoint(event.x,event.y);
                }else{
                    rng = document.selection.createRange();
                }
                if( value === undefined ){
                    rng.moveStart("character",-event.srcElement.value.length);
                    return  rng.text.length;
                }else if(typeof value === "number" ){
                    var index=this.position();
                    index>value?( rng.moveEnd("character",value-index)):(rng.moveStart("character",value-index))
                    rng.select();
                }
            }else{
                if( value === undefined ){
                    return elem.selectionStart;
                }else if(typeof value === "number" ){
                    elem.selectionEnd = value;
                    elem.selectionStart = value;
                }
            }
        }else{
            if( value === undefined)
                return undefined;
        }
    }
})

验证代码

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>测试</title>
   </head>
   <script language="JavaScript" type="text/javascript" src="jquery-1.3.1.min.js"></script>
   <script language="JavaScript" type="text/javascript" src="jquery-position.js"></script>
   <script language="JavaScript" type="text/javascript">
      $(document).ready(function(){
         $('input:eq(0)').click(function(){
            alert($(this).position());
         })
         $('input:eq(1)').click(function(){
            $(this).position(4);

         }) ;
         $('input:eq(1)').blur(function(){
            $(this).position(4);
            $(this).focus();
         })
      })
   </script>
   <body>
      <input type="text"  value="123456789"/>
      <input type="text"  value="123456789"/>
   </body>
</html>

web前端执行者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
光标输入框定位和获取位置

应用场景，这指定的输入框中不同的文本位置，插入标识符。核心代码//光标定位的处理jquery-position.js中的核心代码$.fn.extend({ position:function( value ){ var elem = this[0]; if (elem&&(elem.tagName=="...
复制链接

扫一扫