JavaScript 获取与设置 Input 及 TextArea 光标位置

作者:白露时间:2026-10-25 17:54:01浏览:355

本文介绍在 JavaScript 中获取和设置 Input 及 TextArea 元素光标位置的兼容方案。通过示例代码展示了如何获取当前光标位置以及将光标设置到指定位置,适用于需要精确控制文本编辑场景的开发需求。

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>  </head> <body> <div class="title">JavaScript 获取/设置光标位置,兼容Input&&TextArea:</div> <div class="title">单行文本框</div> <p><input class="input" id="textbox" name="textbox" value="Hi,www.jb51.net!!!" /></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!!!<&#47textarea> <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 全选操作,需引入外部 JavaScript 文件并刷新页面后方可执行相关功能。

作者最新文章