请问如何在<textarea>的当前光标处插入数据？

Web 开发 > JavaScript
收藏 回复
[问题点数：20分，结帖人mp3aaa]
更多帖子
私信 空间 博客
mp3aaa
等级
本版专家分：19
结帖率 99.52%
一个按钮 
当我单击它的时候 在<textarea id="t1">的当前光标处 插入一行数据 "aaa"

比如说 像csdn这个论坛发帖的时候 文章内容的部分  我点击粗体字的时候 他会在光标处插入【b】【/b】



请问如何用JS才实现 在光标处插入数据
只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
xiaofan_sap
等级
本版专家分：6943
http://blog.csdn.net/xiaofan_sap/archive/2009/11/17/4819423.aspx
只看TA 引用 举报 #1得分 0
更多帖子
私信 空间 博客
mp3aaa
等级
本版专家分：19
你的代码没看懂。。。。。
只看TA 引用 举报 #2得分 0
更多帖子
私信 空间 博客
mp3aaa
等级
本版专家分：19
我在网上找了一个 
<FORM> 
<TEXTAREA NAME="a" ONSELECT="this.pos=document.selection.createRange();" onCLICK="this.pos=document.selection.createRange();" onKEYUP="this.pos=document.selection.createRange();">1234567</TEXTAREA>
<INPUT TYPE="button" VALUE="插！" onCLICK="try{this.form.a.pos.text='插！';}catch(e){}"> 
</FORM>


这个代码只能 在IE下成功运行 没法再FF下 
只看TA 引用 举报 #3得分 0
更多帖子
私信 空间 博客
cntmi
等级
本版专家分：1624
刚写了一个，看看是楼主要求的吧


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<script language="javascript"> 



var clone ;

var isFocus = false ;

function getFocus(obj){

	var sel=document.selection.createRange(); 

    clone = sel.duplicate();

	//设置头位置(头等于obj的TextRange的头,尾等于obj的TextRange的尾)

	clone.moveToElementText(obj);



    clone.setEndPoint('EndToEnd', sel);//设置尾位置,些时的clone不能由

	//return clone.text.length ;//光标前文本的长度

}

function getBefore() //得到光标前的文本

{ 

	return clone.text



}  

function getLast() //得到光标后的文本

{ 

    var m=clone.text.length;//当前光标所在位置

	clone.moveStart('character',m);//移动开始点，-m标示当前光标位置前面m个字符处

    clone.moveEnd('character',aa.value.length);//移动结束点,0标示当前光标位置

    clone.select();//选中开始点到结束点间的字符

	return document.selection.createRange().text ;



} 



function insert(str){

	if(clone == null) return ;

	document.getElementById("aa").value = getBefore() + str + getLast() ;

	clone = null ;

}

</script> 

</HEAD>



<BODY>



<textarea id="aa" type=text onclick=getFocus(this) rows=10 cols=50>

场研究公司comScore最新发布的数据显示，微软在美国搜索市场的份额已接近10%，而雅虎搜索的份额逐月下降。谷歌搜索份额继续增长。

</textarea>

<br>

<input type="button" value="插入【ADD】" onclick="insert('ADD')">





</BODY>

</HTML>
只看TA 引用 举报 #4得分 0
更多帖子
私信 空间 博客
cntmi
等级
本版专家分：1624
var isFocus = false ;
上面这句忘了删除啦，~~~
只看TA 引用 举报 #5得分 0
更多帖子
私信 空间 博客
mp3aaa
等级
本版专家分：19
但是在FF下不可以哎 
只能在IE下 插入
只看TA 引用 举报 #6得分 0
更多帖子
私信 空间 博客
cntmi
等级
本版专家分：1624
这样就可以了，代码有点乱哦，呵呵


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<script language="javascript"> 



var clone ;



function getFocus(obj){

	if(document.all){



		 var sel=document.selection.createRange(); 



		clone = sel.duplicate();

		//设置头位置(头等于obj的TextRange的头,尾等于obj的TextRange的尾)

		clone.moveToElementText(obj);



		clone.setEndPoint('EndToEnd', sel);//设置尾位置,些时的clone不能由

		//return clone.text.length ;//光标前文本的长度

	}	





}

function getBefore() //得到光标前的文本

{ 

    return clone.text



}  

function getLast() //得到光标后的文本

{ 

    var m=clone.text.length;//当前光标所在位置

    clone.moveStart('character',m);//移动开始点，-m标示当前光标位置前面m个字符处

    clone.moveEnd('character',aa.value.length);//移动结束点,0标示当前光标位置

    clone.select();//选中开始点到结束点间的字符

    return document.selection.createRange().text ;



} 



function insert(id,str){

	if(document.all){

		alert(clone == null) ;

		if(clone == null) return ;

		document.getElementById("aa").value = getBefore() + str + getLast() ;

		clone = null ;

alert(clone == null) ;

	}else{

		var obj = document.getElementById(id) ;

		var scrollTop = obj.scrollTop; // 滚动的位置

		var start = obj.selectionStart; // 当前光标所在位置



		var pre = obj.value.substr(0, obj.selectionStart); // 光标之前的内容

		var next = obj.value.substr(obj.selectionEnd); // 光标之后的内容



		document.getElementById("aa").value = pre + str + next ;

	}

    

}

</script> 

</HEAD>



<BODY>



<textarea id="aa" type=text onfocus="getFocus(this)" rows=10 cols=50>

场研究公司comScore最新发布的数据显示，微软在美国搜索市场的份额已接近10%，而雅虎搜索的份额逐月下降。谷歌搜索份额继续增长。

</textarea>

<br>

<input type="button" value="插入【ADD】" onclick="insert('aa','ADD')">





</BODY>

</HTML>
只看TA 引用 举报 #7得分 20
更多帖子
私信 空间 博客
wangchunxi88
等级
本版专家分：12
学习一下...
只看TA 引用 举报 #8得分 0
更多帖子
私信 空间 博客
tomdoglz
等级
本版专家分：31
留名
学习了
只看TA 引用 举报 #9得分 0
收起
收藏 回复
mp3aaa

等级：

关注 私信 TA的帖子
使用JS在textarea在光标处插入内容

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

利用selection对象在textarea光标处插入指定文本

最近项目中需要做一个效果：在文本框中光标处输入指定的文本。这里就需要用到selection对象。网上查了资料，看了mdn，发现知识点有点乱，这边先写下我这次用到的几个 兼容性 <= IE10: document.selection,返回的是...

input、textarea 输入框------光标操作、指定光标位置插入内容

1、光标处插入指定内容 /* * obj: input/textarea输入框的dom对象 * str: 光标处要插入的内容 */ function insertText(obj,str) { if (document.selection) { var sel = document.selection.createRange(); sel....

获取光标的位置，并在光标位置插入内容。

你在第二个框里输入的内容就插到你刚才点的光标的位置啦。 但是他有个问题就是如果我想输入的是个公式什么的有html标签的元素。那么他也会把标签带过去。 但是我们真正想要的样式是希望它能解析出来标签的。 ...

jquery在光标处插入字符串

textarea rows="2" style="width:70%;height:260px;" cols="80" placeholder="请输入短信内容" id="context"> </textarea> <button type="button" id="btn">test</button> script代...

body标签中的相关标签

一、内容概要 字体标签 h1~h6 <font> <u> <b> <strong> <em> <sup> <sub> 排版标签 <div> <span> <br>...pr...

HTML5基本标签<搬运>

设置文档标题以及其他不在WEB网页上显示的信息<head></head> 设置文档的可见部分<body></body> 标题标签 将文档的题目放在标题栏中<title></title> 文档整体属性 设置背景...

vue获取textarea的光标位置.js

vue通过当前的光标来进行插值，从而需要去获取光标所在的位置然后进行对光标前后的字符串进行截取处理，从而达到对新字符的插入

vue光标插入内容_vue在光标的位置插入内容

一，在textarea中加入idtype="textarea"id="textarea":autosize="{ minRows: 5, maxRows: 10}":placeholder="$t('common_input')"v-model="messageTemplate.content"/>二、在methods中写入方法async ...

JS在文本域光标位置插入文本

插入前： 插入后： functioninsertAtCursor(myField,myValue){ //IE浏览器 if(document.selection){ myField.focus();...

vue 怎么在字符串中指定位置插入字符_vue在光标的位置插入内容

一，在textarea中加入idtype="textarea"id="textarea":autosize="{ minRows: 5, maxRows: 10}":placeholder="$t('common_input')"v-model="messageTemplate.content"/>二、在methods中写入方法async ...

写一个可插入自定义标签的 Textarea 组件

- “插入自定义标签是什么鬼？” - “比如你要插入一个<wise></wise>的标签...” - “什么情况下会有这种需求？” - “得罪了产品的情况下...” 一、需求背景 某天，产品找到我，发生了如下对话 ...

JS在指定光标位置处插入内容

JS在指定光标位置处插入内容 知识点： selectionStart：光标选区开始位置； selectionEnd：光标选区结束位置 setSelectionRange ：设定 或 元素中当前选中文本的起始和结束位置。语法： element.setSelectionRange...

HTML

HTML文档结构 HTML文档格式： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>​<......

Web前端面试题总结（day6）

 &lt;!...gt; 声明文档类型 ...网页标题，在浏览器顶部显示&lt;/head&gt;  &lt;body&gt;网页的主体部分，即浏览器的内容区域&lt;/body&gt;  &lt;/html&g

HTML入门笔记（案例+截图）

案例1.0 hello.html <html> <head> <title>html技术</title> </head> <body> 大家好！ </body> </html> 案例2.0 第一个html页面.html ......

java获取当前光标位置_获得输入框光标位置

搜狗发布了很有意思的javascript输入法 :搜狗云输入法基本原理即是：将一段js代码当作书签，当选择时...没有处理选择一段文本输入后替换原文字，目前是仍然插入输入区域后面光标问题 :其中重要一步，就是识别当前输...

jQuery实现在光标处插入文本

jquery.caretInsert.js :CodeCode highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->jQuery.extend({ /** * 清除当前选择内容 */ unselectContents

a标签传多个值的写法_html标签图文详解-day2

本文主要内容列表标签：<ul>、<OL>、<dl>表格标签：<table>框架标签及内嵌框架<iframe>表单标签：<...多媒体标签滚动字幕标签：<...英文单词解释如下：ul：unordered ...

阿ken的HTML、CSS的学习笔记_表单的应用（笔记七）

在网页中，一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成，如图7-1 和图7-2所示，即为一个简单的HTML表单界面及其构成。 对于表单构成中的表单控件、提示信息和表单域

js实现在光标的位置 添加内容

原生js的方法： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> ... ...

table a标签 颜色_html标签图文详解-day2

本文主要内容列表标签：<ul>、<OL>、<dl>表格标签：<table>框架标签及内嵌框架<iframe>表单标签：<...多媒体标签滚动字幕标签：<...英文单词解释如下：ul：unordered ...

获取 Textarea 元素当前的光标位置及document.selection.createRange()资料

<br />在任何编辑器中，获取光标位置都是非常重要的，很多人可能认为较难，其实只要处理好浏览器的兼容，还是比较容易实现的。<br />下面我们一起来看看如何获取到 Textarea 元素中的光标位置（测试地址）。<br />...

js 在div光标位置加入内容

div指定位置插入内容 &amp;lt;html&amp;gt; &amp;lt;head&amp;gt;&amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;img id=&quot;pic&quot; src=&quot;...

python学习四十四天(前端之HTML标签)

今日主要内容: 　web标准 　浏览器内核 　HTML介绍,规范,结构详解 　字体标签 　排版标签 　超链接 　图片标签 　列表标签 <ul>、<ol>、<dl>...w3c：万维网联盟组织，用来...

廖雪峰javascrip学习笔记<jQuery>

jQuery这么流行，肯定是因为它解决了一些很重要的问题。实际上，jQuery能帮我们干这些事情： 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；...

网页制作HTML代码全攻略

网页制作HTML代码全攻略

XSS过滤绕过速查表

写在前面：第一次翻译长篇文档，如有疏漏还请各位大牛指正。OWASP的这篇速查表虽然时间比较久了，但还在更新，所以还是翻译出来了。翻译完发现里面还是有一些值得借鉴的思路，用来涨知识还是可以的。由于篇幅较长，...

相关热词 c# 点击事件 自动点击 c# 图片透明背景 c# 模拟按键 c# 线程同步方式 c# 集合改变 1 c# c# 后进先出 集合 c#执行私有方法 c#排序从大到小 c#访问修饰符总结