效果演示

欢迎访问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. sort() 方法用于对数组的元素进行排序

    语法 arrayObject.sort(sortby) 参数 描述 sortby 可选.规定排序顺序.必须是函数. 返回值 对数组的引用.请注意,数组在原数组上进行排序,不生成副本. 说明 如果调用该 ...

  2. hadoop群集安装中碰到的问题

    在hadoop群集安装结束后,进行格式测试出现问题如下 格式化 cd /data/hadoop/bin ./hdfs namenode -format 15/01/21 05:21:17 WARN f ...

  3. ASP.NET通过byte正确安全的判断上传文件格式

    本文介绍一种更安全的方式上传图片,他能有效的防止一些通过修改文件后缀或MIME来伪造的图片的上传,从而保证服务器的安全,希望对大家有所帮助. ASP.NET中在判断文件格式时,我们以前常用的方法就是通 ...

  4. 跨域iframe高度自适应(兼容IE/FF/OP/Chrome)

    采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域.跨域两种情况. 由于客户端js使用浏览器的同源安全策 ...

  5. Ubuntu下安装QT

    环境 Ubuntu 9.10 qt4.7.3 gcc 4.4 Ubuntu中缺少 make 首先安装  sudo apt-get install make 如果不知道缺少啥,就按下面的装 1.sudo ...

  6. nginx 反向代理设置

    假设对本机80端口的访问为一台服务器,对本机8000端口的访问为另一台服务器,下面这样写一个nginx的反向代理配置,就可以实现所有请求都转移 server {listen 0.0.0.0:80;se ...

  7. UI设计之PS界面初始化设置

    一.PS界面初始化 1.新建设置  web设计的基础标准:宽度为1920px,高度自定义,分辨率72px,背景模式RGB 8位.(提示:可以“存为预设”以便以后直接调用) 注意:背景内容为透明!!! ...

  8. 清除层div浮动

    clearboth { clear: both; display: block; height: 0; font-size: 0; overflow: hidden; } <div class= ...

  9. Java之累加和

    所谓累加算法,就是数学中数列求的算法,这都是司空见惯了的.下面我们用java求: package com.cdp.leijiahe; import java.util.Scanner; public ...

  10. 日志备份和差异备份还原中的常见问题示例(转自&邹建)

    --创建测试 CREATE DATABASE db GO    --正常备份 BACKUP DATABASE db TO DISK='c:\1.bak' WITH FORMAT BACKUP LOG  ...