资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
JavaScript 获取/设置光标位置,兼容Input&&TextArea
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript 获取/设置光标位置,兼容Input&&TextArea。</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px; text-indent: 2px; } </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%2F%2F%E8%8E%B7%E5%8F%96%E5%85%89%E6%A0%87%E4%BD%8D%E7%BD%AE%20%0D%0A%2F%2F%E5%8D%95%E8%A1%8C%E6%96%87%E6%9C%AC%E6%A1%86%20%0D%0Afunction%20getPositionForInput(ctrl)%7B%20%0D%0Avar%20CaretPos%20%3D%200%3B%20%0D%0Aif%20(document.selection)%20%7B%20%2F%2F%20IE%20Support%20%0D%0Actrl.focus()%3B%20%0D%0Avar%20Sel%20%3D%20document.selection.createRange()%3B%20%0D%0ASel.moveStart('character'%2C%20-ctrl.value.length)%3B%20%0D%0ACaretPos%20%3D%20Sel.text.length%3B%20%0D%0A%7Delse%20if(ctrl.selectionStart%20%7C%7C%20ctrl.selectionStart%20%3D%3D%20'0')%7B%2F%2F%20Firefox%20support%20%0D%0ACaretPos%20%3D%20ctrl.selectionStart%3B%20%0D%0A%7D%20%0D%0Areturn%20(CaretPos)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC%E6%A1%86%20%0D%0Afunction%20getPositionForTextArea(ctrl)%20%7B%20%0D%0Avar%20CaretPos%20%3D%200%3B%20%0D%0Aif(document.selection)%20%7B%2F%2F%20IE%20Support%20%0D%0Actrl.focus()%3B%20%0D%0Avar%20Sel%20%3D%20document.selection.createRange()%3B%20%0D%0Avar%20Sel2%20%3D%20Sel.duplicate()%3B%20%0D%0ASel2.moveToElementText(ctrl)%3B%20%0D%0Avar%20CaretPos%20%3D%20-1%3B%20%0D%0Awhile(Sel2.inRange(Sel))%7B%20%0D%0ASel2.moveStart('character')%3B%20%0D%0ACaretPos%2B%2B%3B%20%0D%0A%7D%20%0D%0A%7Delse%20if(ctrl.selectionStart%20%7C%7C%20ctrl.selectionStart%20%3D%3D%20'0')%7B%2F%2F%20Firefox%20support%20%0D%0ACaretPos%20%3D%20ctrl.selectionStart%3B%20%0D%0A%7D%20%0D%0Areturn%20(CaretPos)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E5%85%89%E6%A0%87%E4%BD%8D%E7%BD%AE%E5%87%BD%E6%95%B0%20%0D%0Afunction%20setCursorPosition(ctrl%2C%20pos)%7B%20%0D%0Aif(ctrl.setSelectionRange)%7B%20%0D%0Actrl.focus()%3B%20%0D%0Actrl.setSelectionRange(pos%2Cpos)%3B%20%0D%0A%7D%20%0D%0Aelse%20if%20(ctrl.createTextRange)%20%7B%20%0D%0Avar%20range%20%3D%20ctrl.createTextRange()%3B%20%0D%0Arange.collapse(true)%3B%20%0D%0Arange.moveEnd('character'%2C%20pos)%3B%20%0D%0Arange.moveStart('character'%2C%20pos)%3B%20%0D%0Arange.select()%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2Ftest%20%0D%0Afunction%20process(%20id%2CtargetId%20)%7B%20%0D%0Avar%20no%20%3D%20document.getElementById(id).value%3B%20%0D%0AsetCursorPosition(document.getElementById(targetId)%2Cno)%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </head> <body> <div class="title">JavaScript 获取/设置光标位置,兼容Input&&TextArea：</div> <div class="title">单行文本框</div> <p><input class="input" id="textbox" name="textbox" value="Hi,www.glzy8.com!!!" /></p> <input type="button" onclick="alert( getPositionForInput( document.getElementById('textbox') ) )" value="Get Position"> 输入位置: <input type="text" id="no1" size="1" /><input type="button" onclick="process('no1','textbox');" value="Set Position"> <div class="title">多行文本框</div> <textarea id="zhangdanNum" name="zhangdanNum" style="height:66px;width:246px;overflow:hidden">Hi,CssRain!!!</textarea> <input type="button" onclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )" value="Get Position"> 输入位置: <input type="text" id="no2" size="1" /><input type="button" onclick="process('no2','zhangdanNum');" value="Set Position"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程