JS在TextArea光标位置插入文字并实现移动光标到文字末尾


Posted in Javascript onJune 21, 2013

=IE支持document.selection
=Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性

function insertText(obj,str) { 
if (document.selection) { 
var sel = document.selection.createRange(); 
sel.text = str; 
} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') { 
var startPos = obj.selectionStart, 
endPos = obj.selectionEnd, 
cursorPos = startPos, 
tmpStr = obj.value; 
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length); 
cursorPos += str.length; 
obj.selectionStart = obj.selectionEnd = cursorPos; 
} else { 
obj.value += str; 
} 
} 
function moveEnd(obj){ 
obj.focus(); 
var len = obj.value.length; 
if (document.selection) { 
var sel = obj.createTextRange(); 
sel.moveStart('character',len); 
sel.collapse(); 
sel.select(); 
} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') { 
obj.selectionStart = obj.selectionEnd = len; 
} 
}

<input type="button" onclick="insertText(document.getElementById('text'),' 新文字—YoyiorLee ')" value="插入文字"></input>

<input type="button" onclick="moveEnd(document.getElementById('text'))" value="移到末尾"></input>
Javascript 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 #Javascript
随窗体滑动的小插件sticky源码
Jun 21 #Javascript
jquery中文乱码的多种解决方法
Jun 21 #Javascript
js单向链表的具体实现实例
Jun 21 #Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 #Javascript
js简易namespace管理器 实例代码
Jun 21 #Javascript
JavaScript中的this关键字介绍与使用实例
Jun 21 #Javascript
You might like
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
PHP新手上路(九)
2006/10/09 PHP
php项目打包方法
2008/02/18 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
js打印纸函数代码(递归)
2010/06/18 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
Python中的迭代器漫谈
2015/02/03 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
python 进程的几种创建方式详解
2019/08/29 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
思想品德自我鉴定
2013/10/12 职场文书
物流专业大学生的自我鉴定
2013/11/13 职场文书
服务之星事迹材料
2014/05/03 职场文书
学校师德承诺书
2014/05/23 职场文书
教师自我剖析材料
2014/09/29 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
使用Ajax实现无刷新上传文件
2022/04/12 Javascript
关于vue-router-link选择样式设置
2022/04/30 Vue.js