在textarea和input光标处插入内容,支持ie

项目需求,用户要能够输入和点击外面的公式去插入到textaera中,试了好几种方法,有的是在谷歌下好使,在ie下不好使,最后找到了下面这个方法,目前在ie8以上都可以生效。直接上代码

 1 function insertAtCursor(myField, myValue) {
 2         //IE support
 3         if (document.selection) {
 4             myField.focus();
 5             sel = document.selection.createRange();
 6             sel.text = myValue;
 7         }
 8         //MOZILLA and others
 9         else if (myField.selectionStart || myField.selectionStart == ‘0‘) {
10             var startPos = myField.selectionStart;
11             var endPos = myField.selectionEnd;
12             myField.value = myField.value.substring(0, startPos)
13                     + myValue
14                     + myField.value.substring(endPos, myField.value.length);
15             myField.selectionStart = startPos + myValue.length;
16             myField.selectionEnd = startPos + myValue.length;
17         } else {
18             myField.value += myValue;
19         }
20     }
21   

调用也相当的简单

insertAtCursor(‘DOM节点’,‘内容’);

原文地址:https://www.cnblogs.com/liys-kiki/p/11738393.html

时间: 2024-10-09 06:18:35

在textarea和input光标处插入内容,支持ie的相关文章

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

// 在光标处插入字符串 // myField 文本框对象 // myValue 要插入的值 function insertAtCursor(myField, myValue) { //IE support if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; sel.select(); } //MOZILLA/NETSCAPE support

在光标处插入内容。

function insertAtCursor(myField, myValue) { if (document.selection) { //IE myField.focus(); var sel = document.selection.createRange(); //创造range对象 sel.text = myValue; //由于我们选择的RANGE对象长度就是光标,直接赋插入值即可 }else if (myField.selectionStart || myField.select

js在光标处插入内容

//场景一 简易的页面可以这样写var range = window.getSelection().getRangeAt(0);range.insertNode(document.createTextNode("插入的值")); //场景二 如果需要插入HTML文本,考虑到在弹出框中插入的场景,因此修改为如下方式var range;//记录光标位置对象var node = window.getSelection().anchorNode;// 这里判断是做是否有光标判断,因为弹出框默认

JQ在光标处插入文字

内容转载自网络这是一个JQ的扩展方法.在teatarea获得焦点时,往光标处插入文字,扩展代码如下 (function($){ $.fn.extend({ "insert":function(value){ //默认参数 value=$.extend({ "text":"123" },value); var dthis = $(this)[0]; //将jQuery对象转换为DOM元素 //IE下 if(document.selection){

由编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)实现的富文本编辑器

转载请注明: TheViper http://www.cnblogs.com/TheViper  大家都知道,如果只是大概的实现一个简单的富文本编辑器,直接用execCommand就可以了,虽然不同浏览器对execCommand命令的反应不一样,最后效果是差不多的.当然,如果要严谨的,用像ueditor那种只有很少部分实现是用execCommand的富文本编辑器. 昨天,本屌就试着用execCommand搞一个简单的编辑器.在本屌看来,什么字体加粗,斜体,下划线,对齐,列表..直接用execCo

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

近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情出来了,当编辑框失去焦点时候,再插入图片时候总是插入在最前面(谷歌和火狐,IE没问题).还没搞定,,, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

解决从光标处插入图片光标消失的问题

最近在做一个富文本编辑器,当鼠标单击事件发生在编辑区域外以后,光标就会消失,那么execCommand()方法就不能在编辑器处执行. 此时需要记录下光标消失的位置,一下几篇博文帮助非常大,记录下,以便后续学习使用. 1. TheViper,说的很详细 http://www.cnblogs.com/TheViper/p/4303158.html 2.这块说的一幕了然  http://w3cboy.com/post/2015/06/iframe-insert-picture-cursor/ 以上代码

JQuery在光标位置插入内容

1 (function($) { 2 $.fn.extend({ 3 insertAtCaret: function(myValue) { 4 var $t = $(this)[0]; 5 //IE 6 if (document.selection) { 7 this.focus(); 8 sel = document.selection.createRange(); 9 sel.text = myValue; 10 this.focus(); 11 } else 12 //!IE 13 if

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ