效果演示

欢迎访问cssfirefly.cnblogs.com

html:

<textarea id="text" style="width:500px;height:80px;">欢迎访问http://cssfirefly.cnblogs.com/</textarea>

<input type="button" value="插入文字" onclick="insertText(document.getElementById('text'),' NewWord ')">
<input type="button" value="插入文字" onclick="moveEnd(document.getElementById('text'))">

js:

代码如下:
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;
}
}

textarea 在光标处插入文字的更多相关文章

  1. JQ在光标处插入文字

    内容转载自网络这是一个JQ的扩展方法.在teatarea获得焦点时,往光标处插入文字,扩展代码如下 (function($){ $.fn.extend({ "insert":fun ...

  2. 使用JS在textarea在光标处插入内容

    // 在光标处插入字符串 // myField 文本框对象 // myValue 要插入的值 function insertAtCursor(myField, myValue) { //IE supp ...

  3. textarea光标处插入文字

    (function($) { $.fn.extend({ //myField 对象元素 myValue 插入值 insertAtCursor: function(myField,myValue) { ...

  4. textarea在光标位置插入文字

    最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...

  5. 【Javascript】在文本框光标处插入文字并定位光标 (转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字

    近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...

  7. javascript实现在textarea光标位置插入文字并移动光标到文字末尾

    1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...

  8. js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js实现文本框文本域光标处插入图片文本的插件(并且光标在插入内容的内容后显示)

    js: /******************************************* * * 插入光标处的插件 * @authors Du xin li * @update    2015 ...

随机推荐

  1. PathAnimation

    使用Blend制作PathAnimation 1:选中Path转换为运动路径 2:选择目标对象 PathAnimation使用动态的Path PathAnimation动画在播放的时候,PahtGeo ...

  2. 2dx解析cocosbuilder中使用layer时的缺陷

    2dx解析cocosbuilder中使用layer时的缺陷 cocos2d-x 3.7 cocosbuilder中的layer通常会用到触摸属性: 但是在2dx解析布局文件的时候,却很多属性都没解析: ...

  3. [Java] 内部类总结

    内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和缺省的包访问权 ...

  4. 【Shell脚本学习13】Shell数组:shell数组的定义、数组长度

    Shell在编程方面比Windows批处理强大很多,无论是在循环.运算. bash支持一维数组(不支持多维数组),并且没有限定数组的大小.类似与C语言,数组元素的下标由0开始编号.获取数组中的元素要利 ...

  5. 【开源项目8】Android开源项目分类汇总【畜生级别】

    欢迎大家推荐好的Android开源项目,可直接Commit或在 收集&提交页 中告诉我,欢迎Star.Fork :) 微博:Trinea    主页:www.trinea.cn    邮箱:t ...

  6. cocoapods 卸载,重装,高版本的使用

    今天清理下电脑,发现自己电脑上的cocoapods经常出现的一个问题就是一些经常用的第三方库cocoapods搜不到,比如SDWebImage,然后就鼓捣了一下 $pos list 命令发现M 以后的 ...

  7. Java学习笔记——多态性Polymorphism

    Java中实现多态的机制 Java中实现多态的机制靠的是父类或者接口定义的引用变量可以指向子类或者具体的实现类的实例对象,而程序调的方法在运行期才动态绑定,就是引用变量所指向的具体实例对象的方法,也就 ...

  8. 使用Boost asio实现异步的TCP/IP通信

    可以先了解一下Boost asio基本概念,以下是Boost asio实现的异步TCP/IP通信: 服务器: #include "stdafx.h" #include <io ...

  9. EF Code First 数据迁移命令

    只需要开启程序管理控制台(Package Manager Console) 然后输入  Enable-Migrations -ContextTypeName youContextdb(你的数据库上下文 ...

  10. curl模拟浏览器进行phpQuery抓取数据

    报Warning: file_get_contents(http://www.dianping.com/shop/8042874) [function.file-get-contents]: fail ...