zoukankan      html  css  js  c++  java
  • js 操作文本框中光标位置

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     2 <html xmlns="http://www.w3.org/1999/xhtml"> 
     3 <head> 
     4 <title>JavaScript 获取/设置光标位置,兼容Input&&TextArea</title> 
     5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
     6 <style> 
     7 body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } 
     8 .title { font-size: 18px; font-weight: bolder;margin:40px 0; } 
     9 .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px; text-indent: 2px; } 
    10 </style> 
    11 <script> 
    12 //获取光标位置 
    13 //单行文本框 
    14 function getPositionForInput(ctrl){ 
    15 var CaretPos = 0; 
    16 if (document.selection) { // IE Support 
    17 ctrl.focus(); 
    18 var Sel = document.selection.createRange(); 
    19 Sel.moveStart('character', -ctrl.value.length); 
    20 CaretPos = Sel.text.length; 
    21 }else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support 
    22 CaretPos = ctrl.selectionStart; 
    23 } 
    24 return (CaretPos); 
    25 } 
    26 //多行文本框 
    27 function getPositionForTextArea(ctrl) { 
    28 var CaretPos = 0; 
    29 if(document.selection) {// IE Support 
    30 ctrl.focus(); 
    31 var Sel = document.selection.createRange(); 
    32 var Sel2 = Sel.duplicate(); 
    33 Sel2.moveToElementText(ctrl); 
    34 var CaretPos = -1; 
    35 while(Sel2.inRange(Sel)){ 
    36 Sel2.moveStart('character'); 
    37 CaretPos++; 
    38 } 
    39 }else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support 
    40 CaretPos = ctrl.selectionStart; 
    41 } 
    42 return (CaretPos); 
    43 } 
    44 //设置光标位置函数 
    45 function setCursorPosition(ctrl, pos){ 
    46 if(ctrl.setSelectionRange){ 
    47 ctrl.focus(); 
    48 ctrl.setSelectionRange(pos,pos); 
    49 } 
    50 else if (ctrl.createTextRange) { 
    51 var range = ctrl.createTextRange(); 
    52 range.collapse(true); 
    53 range.moveEnd('character', pos); 
    54 range.moveStart('character', pos); 
    55 range.select(); 
    56 } 
    57 } 
    58 //test 
    59 function process( id,targetId ){ 
    60 var no = document.getElementById(id).value; 
    61 setCursorPosition(document.getElementById(targetId),no); 
    62 } 
    63 </script> 
    64 </head> 
    65 <body> 
    66 <div class="title">JavaScript 获取/设置光标位置,兼容Input&&TextArea</div> 
    67 <div class="title">单行文本框</div> 
    68 <p><input class="input" id="textbox" name="textbox" value="Hi,www.fengfly.com!!!" /></p>
    69 
    70 <input type="button" onclick="alert( getPositionForInput( document.getElementById('textbox') ) )" value="Get Position"> 
    71 输入位置: <input type="text" id="no1" size="1" /><input type="button" onclick="process('no1','textbox');" value="Set Position">
    72 
    73 <div class="title">多行文本框</div> 
    74 <textarea id="zhangdanNum" name="zhangdanNum" style="height:66px;246px;overflow:hidden">Hi,CssRain!!!</textarea> 
    75 <input type="button" onclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )" value="Get Position"> 
    76 输入位置: <input type="text" id="no2" size="1" /><input type="button" onclick="process('no2','zhangdanNum');" value="Set Position"> 
    77 </body> 
    78 </html>

    运行代码

     
  • 相关阅读:
    RabbitMq学习4-发布/订阅(Publish/Subscribe)
    RabbitMq学习3-工作队列(Work queues)
    《大型网站技术架构》-读书笔记七:安全架构
    RabbitMq学习2-php命令行模式测试rabbitmq
    《大型网站技术架构》-读书笔记六:可扩展架构
    RabbitMq学习1-介绍、安装和配置
    《大型网站技术架构》-读书笔记五:伸缩性架构
    C#构建树形数据结构
    数据结构和算法(一)概念
    C# 简介
  • 原文地址:https://www.cnblogs.com/zhyj/p/2934922.html
Copyright © 2011-2022 走看看