zoukankan      html  css  js  c++  java
  • 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="300px;height:120px;" 
      onselect="setCaret(this);" 
      onclick="setCaret(this);" 
      onkeyup="setCaret(this);"   >例子例子例子例子例子</textarea>  
      <br/><br/>  
      <input   type="text"   name="textfield"   style="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; 300px; height:200px;">sljfldjfldf</div>
     
    </body>
    </html>

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

    
    
  • 相关阅读:
    JAVA 8 主要新特性 ----------------(二)JDK1.8优点概括
    js 对cookie 的操作
    js 中类似时钟的显示
    js 把数字转成2 ,8,16进制的方法
    js 对闭包的理解
    js 利用throw 写的一个小程序
    js 获取当前的时间
    ios使用jspatch中需要注意的事项
    IOS 开发中要注意的事项
    iOS 利用JSPatch 添加热补丁功能
  • 原文地址:https://www.cnblogs.com/sghy/p/7462870.html
Copyright © 2011-2022 走看看