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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<script   type="text/javascript">
function setCaret(textObj) {
    if (textObj.createTextRange) {
        textObj.caretPos = document.selection.createRange().duplicate();
    }
}
function insertAtCaret(textObj, textFeildValue) {
    if (document.all) {
        if (textObj.createTextRange && textObj.caretPos) {
            var caretPos = textObj.caretPos;
            caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ‘   ‘ ? textFeildValue + ‘   ‘ : textFeildValue;
        } else {
            textObj.value = textFeildValue;
        }
    } else {
        if (textObj.setSelectionRange) {
            var rangeStart = textObj.selectionStart;
            var rangeEnd = textObj.selectionEnd;
            var tempStr1 = textObj.value.substring(0, rangeStart);
            var tempStr2 = textObj.value.substring(rangeEnd);
            textObj.value = tempStr1 + textFeildValue + tempStr2;
        } else {
            alert("This   version   of   Mozilla   based   browser   does   not   support   setSelectionRange");
        }
    }
}
 </script>  

  <form   id="form1"   action=""   onsubmit=""   method="post"   enctype="text/plain">
  <p>
  <textarea   name="tarea"   rows=""   cols=""   style="width:300px;height:120px;"
  onselect="setCaret(this);"
  onclick="setCaret(this);"
  onkeyup="setCaret(this);"   >例子例子例子例子例子</textarea>
  <br/><br/>
  <input   type="text"   name="textfield"   style="width:220px;"   value="插入FireFox"/>
  <br/>
  <input   type="button"   value="插入"
  onclick="insertAtCaret(this.form.tarea,this.form.textfield.value);"/>
  </p>
  </form>
<div id="box" contenteditable="true" style="border:1px solid #ccc; width:300px; height:200px;">sljfldjfldf</div>

</body>
</html>

推荐:http://www.cnblogs.com/huanlei/p/3242096.html

				
时间: 2024-10-08 09:30:44

js实现在光标的位置 添加内容的相关文章

textarea 根据光标位置添加内容

// 获取焦点 let txt = document.getElementById("countRule"); let temp = txt.value; txt.focus(); let pointIndex = txt.selectionStart; let str1 = temp.substr(0,pointIndex); let str2 = temp.substr(pointIndex,temp.length); txt.value = str1+dom+str2; if(

在任意位置为stringbuffer 添加内容

package tianjia.cn; /* * 在任意位置 添加内容 * api方法: * StringBuffer insert(int offset, boolean b) 将 boolean 参数的字符串表示形式插入此序列中. StringBuffer insert(int offset, char c) 将 char 参数的字符串表示形式插入此序列中. StringBuffer insert(int offset, char[] str) 将 char 数组参数的字符串表示形式插入此序

javascript 获取光标所选中的内容并插入到另一个文本框中(兼容ie和ff)

项目中正好用到 做下笔记方便以后查找 ie获取光标的位置使用document.selection.createRange() 火狐下使用document.getElementById(id).selectionStart 和 document.getElementById(id).selectionEnd 假设我们要获得id为txt的Textarea元素里面光标所选择的内容 首先创建一个获得光标所选内容的函数(参数:火狐下需要Dom元素 select_field=document.getElem

用js控制按钮时间,将指定内容添加到文本域的光标所在位置。

<pre class="javascript" name="code"> var fm = document.getElementsByTagName('form')[0]; var button = document.getElementsByName("button"); //获取一个cookie的值 function getCookie(index){ var allcookies = document.cookie; var

【重要重要】如何在div是contentEditable=true的里面获取光标的位置,并在光标位置处插入内容。焦点位置插入指定内容

为什么要在contentEditable=true的div里面获取光标呢?因为这篇文章https://blog.csdn.net/qq_33769914/article/details/85002918我们知道想在一个内容里面插入一个新的内容,如果这个新的内容是段html代码.最后显示的是有样式的.那么用input是无法实现的. 所以我们考虑用contentEditable=true的div.在这里面输入的html就没问题啦.————————————————版权声明:本文为CSDN博主「夏天想」

原创:js代码, 让dedecms支持Tag选择, 添加内容更为方便,不用手输Tag

dedecms在编辑修改内容时,TAG标签需要手动输,中文的Tag, 中间还得用半角字符','分隔,  输入法切来切去很不方便,   于是动手改后台代码, 利用后台的tags_main.php, 让dedecms添加内容时能去tags_main里去选择. 1. 打开\dede\templets\album_add.htm文件, 在顶部head中的js script区增加js方法. function setag(){ var tagg=window.showModalDialog("tags_ma

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添加文本内容与简单的日历

js实现动态给一个div添加文本内容(即在文本框中输入一段文字,点击设置文字按钮实现将文本框中的文字添加到div中) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <style

js如何动态为指定的元素添加内容

js如何动态为指定的元素添加内容:在实际应用中要根据代码的执行情况来动态的创建一个元素,然后添加到指定的元素,下面就通过一个简单的实例简单的介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"