textarea 在光标处插入文字
效果演示
欢迎访问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 在光标处插入文字的更多相关文章
- JQ在光标处插入文字
内容转载自网络这是一个JQ的扩展方法.在teatarea获得焦点时,往光标处插入文字,扩展代码如下 (function($){ $.fn.extend({ "insert":fun ...
- 使用JS在textarea在光标处插入内容
// 在光标处插入字符串 // myField 文本框对象 // myValue 要插入的值 function insertAtCursor(myField, myValue) { //IE supp ...
- textarea光标处插入文字
(function($) { $.fn.extend({ //myField 对象元素 myValue 插入值 insertAtCursor: function(myField,myValue) { ...
- textarea在光标位置插入文字
最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...
- 【Javascript】在文本框光标处插入文字并定位光标 (转)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 可编辑DIV (contenteditable="true") 在鼠标光标处插入图片或者文字
近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情 ...
- javascript实现在textarea光标位置插入文字并移动光标到文字末尾
1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...
- js在一个可编辑的div光标处插入图片或者文本(兼容ie,火狐等浏览器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现文本框文本域光标处插入图片文本的插件(并且光标在插入内容的内容后显示)
js: /******************************************* * * 插入光标处的插件 * @authors Du xin li * @update 2015 ...
随机推荐
- hql & mysql 札记
最近在某D实习,刚去就开始各种写HQL,碰壁很多次. 几个知识点记录一下,逐个攻破. sql 中的case when, 选择循环的写法.(http://www.cnblogs.com/zengen/a ...
- 沈逸老师PHP魔鬼特训笔记(1)
此课程个人开发环境可以考虑使用Ubuntu ,推荐sublime和PhpStorm作为开发环境.一.PHP的一大特性是:脚本语言.不要编译,写完就可以运行? 然而并不是....... PHP代码要想运 ...
- 重构9-Extract Interface(提取接口)
我们来介绍一个常常被忽视的重构:提取接口.如果你发现多于一个类使用另外一个类的某些方法,引入接口解除这种依赖往往十分有用.该重构实现起来非常简单,并且能够享受到松耦合带来的好处. public cla ...
- 典型的字符串处理代码(page50)
Page50: public class TypicalString{//典型的字符串处理代码 public static boolean isPlalindrom(String s){//判断字符串 ...
- 剑指Offer29 连续子数组最大和
/************************************************************************* > File Name: 29_Greate ...
- 【Dijkstra】
[摘自]:华山大师兄,推荐他的过程动画~ myth_HG 定义 Dijkstra算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩 ...
- 新颖的O2O商业模式,江水平和他的装修队
文/秦刚 江水平是我微信上的朋友,有一天他给我留言说,秦刚老师我觉得你应该采访我,因为我的商业模式非常新颖有趣,应该能够给很多创业者启发. 我让江水平把他的商业模式写给我,他效率很高,一天就写好给我了 ...
- latex之设置字体大小
\tiny\scriptsize\footnotesize\small\normalsize\large\Large\LARGE\huge\Huge
- CSS3 照片墙
HTML <body> <h2>照片墙制作</h2> <div class="container"> <img class=& ...
- CSS之侧边栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...