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

 更新时间:2013年06月21日 16:28:12   作者:   我要评论
JS在TextArea光标位置插入文字+移动光标到文字末尾,Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性,具体实现如下,感兴趣的朋友可以参考下哈
=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>

相关文章

  • JS根据浏览器窗口大小实时动态改变网页文字大小的方法

    JS根据浏览器窗口大小实时动态改变网页文字大小的方法

    这篇文章主要介绍了JS根据浏览器窗口大小实时动态改变网页文字大小的方法,涉及JavaScript针对页面宽高的动态获取与元素样式动态运算的相关技巧,需要的朋友可以参考下
    2016-02-02
  • Javascript中字符串和数字的操作方法整理

    Javascript中字符串和数字的操作方法整理

    字符串和数字的操作在js中非常频繁,也非常重要。以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊。下面这篇文章就对字符串和数字的一些常用操作做个整理,一者加深印象,二者方便今后温习查阅。需要的朋友们可以参考借鉴。
    2017-01-01
  • JS判断日期格式是否合法的简单实例

    JS判断日期格式是否合法的简单实例

    下面小编就为大家带来一篇JS判断日期格式是否合法的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript中日期函数new Date()的浏览器兼容性问题

    javascript中日期函数new Date()的浏览器兼容性问题

    这篇文章主要介绍了javascript中日期函数new Date()的浏览器兼容性问题,需要的朋友可以参考下
    2015-09-09
  • Bootstrap CSS布局之代码

    Bootstrap CSS布局之代码

    这篇文章主要介绍了Bootstrap CSS布局之代码的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Javascript实现div层渐隐效果的方法

    Javascript实现div层渐隐效果的方法

    这篇文章主要介绍了Javascript实现div层渐隐效果的方法,涉及javascript操作页面元素与样式变化的相关技巧,需要的朋友可以参考下
    2015-05-05
  • setTimeout函数兼容各主流浏览器运行执行效果实例

    setTimeout函数兼容各主流浏览器运行执行效果实例

    setTimeout是一个很不错的函数,网站页面前端工程师经常将其用于几秒后执行的动作,下文要讲的setTimeout可以很好地兼容IE6,7,8,9以及谷歌等主流浏览器
    2013-06-06
  • js实现简单的星级选择器提交效果适用于评论等

    js实现简单的星级选择器提交效果适用于评论等

    星级选择器在网上会搜到很多类似的代码,不过实现起来相对比较复杂,在本文将为大家介绍的是使用js简单的实现下,感兴趣的朋友不要错过
    2013-10-10
  • 打字效果动画的4种实现方法(超简单)

    打字效果动画的4种实现方法(超简单)

    下面小编就为大家带来一篇打字效果动画的4种实现方法(超简单)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • javascript伸缩型菜单实现代码

    javascript伸缩型菜单实现代码

    这是一款真正的JavaScript伸展收缩型菜单,鼠标放上看一看,是不是很酷?鼠标划出菜单项的时候,背景会伸长。菜单没有加链接,想用的自己加,再美化一下,绝对够个性吧。
    2015-11-11

最新评论