可编辑div 获取光标位置及插入内容

<!DOCTYPE html>
<html>

<title>Div 光标位置 插入 文字 或 HTML</title>
<script language="javascript" type="text/javascript">
var range;
    function getPos()
    {
        range = window.getSelection().getRangeAt(0);//找到焦点位置
        var span = document.createElement(‘span‘);
        span.innerHTML = ‘qqqqqqqqqqqqqqqqqqqqqqqqqq‘;
        range.insertNode(span);//在焦点插入节点
    }

</script>
</head>
<body>

    <div id="myDiv" style="width: 300px; height: 100px;border: black 1px solid; font-size:small; line-height:1; "
        onclick="getPos();"   onkeyup="getPos();"  contenteditable="true">
          a b ccdfdfd dfdffddf f fdfdf
    </div>         

</body>
</html>

时间： 2024-10-10 17:32:29

可编辑div 获取光标位置及插入内容的相关文章

android EditText获取光标位置并且插入字符或者删除字符

1.获取光标位置 [java] int index = editText.getSelectionStart(); int index = editText.getSelectionStart(); 2.在光标处插入字符 [java] int index = editText.getSelectionStart(); Editable editable = editText.getText(); editable.insert(index, "aaaa"); int index = e

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

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

Android EditText获取光标位置并插入字符删除字符

1.获取到光标所在的位置 int index = editText.getSelectionStart(); 2.在光标的地方插入字符 int index = editText.getSelectionStart(); Editable editable = editText.getText(); editable.insert(index, "哈哈哈"); 3.删除光标前的字符(光标在哪里从哪里开始删除) int index = editText.getSelectionStart(

android EditText获取光标位置并安插字符删除字符

android EditText获取光标位置并插入字符删除字符1.获取光标位置int index = editText.getSelectionStart(); 2.在光标处插入字符int index = editText.getSelectionStart();Editable editable = editText.getText();editable.insert(index, "aaaa");3.删除光标前字符int index = editText.getSelectionS

关于文本输入框获取光标位置以及指定位置插入内容

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body> &l

js之向div contenteditable光标位置添加字符

原理: 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生一个选中对象-selection(就是我们可以看到的文字变成蓝色的那个区域),selection在火狐浏览器可以直接用 window.getSelection()获取,在HTML里面,selection只有一个的,并且selection是一个区域,你可以想象成一个长方形,它是有开始和结束的当你点击一个输入框,或者你切换到别的输入框,selection是会跟着变化

获取光标位置

原文:https://blog.csdn.net/mafan121/article/details/78519348 html <iframe id="editor" width="600px" height="400px" style="border:solid 1px;"></iframe> <input type="txt" onclick="alert(get

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

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

可编辑div将光标定位到最后

最近做了一个可以回复留言的页面,主要包括:@.表情功能,一开始使用的是文本域textarea,最后发现这样无法显示表情,后来改成可编辑div,在div中添加contenteditable="true",则该div即可编辑. <div contenteditable="true"></div> 在选择表情或者选择@某人后,会经常遇到选择后可编辑div中的光标不见了,或者显示的位置不对,于是在网上找了些方法,现在总结下: function set