`
fackyou200
  • 浏览: 309501 次
  • 性别: Icon_minigender_1
  • 来自: 山西太原
社区版块
存档分类
最新评论

textarea光标处插入内容,兼容IE、方法、chrome,可模拟表情

    博客分类:
  • js
 
阅读更多
/**
 * tId   文本域Id
 * tag   插入内容
 */
ffunction addEmoticon(tId,tag) {
		var txtarea = document.getElementById(tId);
		//IE
		if(document.selection) {
		var theSelection = document.selection.createRange().text;
		if(!theSelection) { theSelection=tag}
		txtarea.focus();
		if(theSelection.charAt(theSelection.length - 1) == " "){
		theSelection = theSelection.substring(0, theSelection.length - 1);
		document.selection.createRange().text = theSelection+ " ";
		} else {
		document.selection.createRange().text = theSelection;
		}

		}
		// Mozilla
		else if(txtarea.selectionStart || txtarea.selectionStart == '0'){
		var startPos = txtarea.selectionStart;
		var endPos = txtarea.selectionEnd;
		var myText = (txtarea.value).substring(startPos, endPos);
		if(!myText) { myText=tag;}
		if(myText.charAt(myText.length - 1) == " "){ // exclude ending space char, if any
		subst = myText.substring(0, (myText.length - 1))+ " ";
		} else {
		subst = myText;
		}
		txtarea.value = txtarea.value.substring(0, startPos) + subst + txtarea.value.substring(endPos, txtarea.value.length);
		txtarea.focus();
		var cPos=startPos+(myText.length);
		txtarea.selectionStart=cPos;
		txtarea.selectionEnd=cPos;

		}
		// All others
		else{
		txtarea.value+=tag;
		txtarea.focus();
		}
		if (txtarea.createTextRange) txtarea.caretPos = document.selection.createRange().duplicate();
	}

 jquery写法(主要部分):

(function($) {
$.fn.insertAtCaret = function (tagName) {
return this.each(function(){
if (document.selection) {
//IE support
var theSelection = document.selection.createRange().text;
if(!theSelection) { theSelection=tagName}
this.focus();
if(theSelection.charAt(theSelection.length - 1) == " "){
theSelection = theSelection.substring(0, theSelection.length - 1);
document.selection.createRange().text = theSelection+ " ";
} else {
document.selection.createRange().text = theSelection;
}
}else if (this.selectionStart || this.selectionStart == '0') {
//MOZILLA/NETSCAPE support
startPos = this.selectionStart;
endPos = this.selectionEnd;
scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos) + tagName + this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + tagName.length;
this.selectionEnd = startPos + tagName.length;
this.scrollTop = scrollTop;
} else {
this.value += tagName;
this.focus();
}
if(this.createTextRange) this.caretPos = document.selection.createRange().duplicate();
});
};
})(jQuery);

 转:http://www.zhudongdong.cn/html/347.html

分享到:
评论

相关推荐

    在textarea光标处插入文本

    ### 在Textarea光标处插入文本 #### 知识点概览 本文将详细介绍如何使用JavaScript在`textarea`的光标位置插入文本。该方法适用于多种浏览器环境,包括Internet Explorer(IE)和其他基于Mozilla的浏览器(如Fire...

    Textarea在光标停留处插入文字

    标题“Textarea在光标停留处插入文字”涉及到的是如何在`Textarea`中实现文字的动态插入,使得新添加的文字能精确地出现在用户当前光标所在的位置。这通常涉及到JavaScript的DOM操作和事件监听。 在HTML中,`...

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

    在JavaScript中,要实现在`textarea`的光标处插入内容,我们需要考虑浏览器的兼容性问题,因为不同的浏览器处理文本选择的方式不同。主要有两种方法: ##### A. IE支持 对于Internet Explorer浏览器,使用`...

    jQuery往textarea中光标所在位置插入文本的方法

    文章首先定义了jQuery的扩展方法insertContent,该方法允许在textarea中光标所在的位置插入任意文本。接着,通过实例演示了如何触发这个方法,实现了在textarea元素中插入图片文件名的功能。 知识点详述: 1. ...

    JS在textarea光标处插入文本的小例子

    标题“JS在textarea光标处插入文本的小例子”和描述“本实例使用Javascript实现在textarea光标处插入文本,支持多种浏览器”揭示了该文档是关于如何使用JavaScript在网页文本区域(textarea)组件光标所在位置插入...

    textarea光标定位在最后

    textarea光标定位在最后,就是往textarea中赋值时候,光标自动移到最后。

    光标处插入图片(类似于qq表情)

    在IT行业中,尤其是在文本编辑和富文本处理领域,"光标处插入图片(类似于qq表情)"是一个常见的功能需求。这个功能允许用户在文本输入时,像QQ聊天那样,在光标位置方便地插入图片,增强表达的生动性。下面将详细探讨...

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

    在处理`<textarea>`光标位置插入文字并移动光标到文字末尾的操作时,主要涉及两个关键属性:`selectionStart`和`selectionEnd`,以及在IE中使用的`document.selection`对象。 `selectionStart`和`selectionEnd`是...

    javascript 在光标处插入指定内容

    总结起来,JavaScript在光标处插入指定内容涉及的关键知识点包括:DOM操作、文本选区和光标位置的获取、`Range`对象的使用、`Selection`对象的操作以及富文本编辑器的API。理解并熟练运用这些知识,可以让你在网页...

    textarea 自适应大小 兼容Chrome ie等浏览器

    textarea 自适应大小 兼容Chrome ie等浏览器,自动调整大小

    javascript textarea光标定位方法(兼容IE和FF)

    在本文中,我们将探讨如何在 textarea 元素中实现光标定位,同时确保兼容 Internet Explorer(IE)和 Firefox(FF)这两种主要的浏览器。 在 textarea 中设置光标位置是一个常见的需求,特别是在用户交互场景中,如...

    获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍

    本文将介绍如何在IE、Firefox和Chrome中获取div编辑框、textarea和input text光标位置的方法,并提供相应的代码示例。 首先,了解不同浏览器对于光标位置获取的支持情况是必要的。例如,IE浏览器使用了document....

    JavaScript获取,设置光标位置,兼容InputTextArea

    为了解决这个问题,可以使用`createTextRange`和`setSelectionRange`方法,实现对旧版IE浏览器的兼容: ```javascript function setCursorPosition(input, pos) { if (input.setSelectionRange) { // 现代浏览器 ...

    通过javascript在光标处插入文本

    通过Javascript在光标处插入文本 在网页开发中,经常需要在文本框中插入文本,特别是在光标处插入文本。下面,我们将讨论如何使用Javascript在光标处插入文本。 光标位置获取 在获取光标位置之前,我们需要了解...

    jquery textarea插入gif动态QQ表情图片表单提交

    这会在textarea的当前光标位置插入表情。 至于表单提交,当用户完成输入并点击提交按钮时,需要获取textarea的值,包括插入的表情。由于表达式是自定义的字符串,服务器端需要解析这些字符串来显示对应的gif图片。...

    jQuery获取设置textarea中光标位置

    jQuery扩展函数,用于获取设置textarea中光标位置

    vue获取textarea的光标位置.js

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

Global site tag (gtag.js) - Google Analytics