当我们做一个聊天对话框时,可能想要支持图片发送或表情,而且我们希望表情和图片都以图片方式呈现在输入框内,这时,textarea就不管用了,因为它只支持纯文本。
我们可以利用div的contentEditable="true"属性设置,使DIV可编辑,这样,div中就可以追加图片。
我们插入表情时,需要先点击输入框上方或下方给的一个表情按钮,从而弹出一个浮动层,里面是各种表情,点击表情,即可将表情放到DIV中光标所在位置。
但有一个问题是:如果发送表情,是可能需要将表情插入到文本中间,而非文本末尾。而当我们点击表情按钮时,会导致DIV失去焦点,从而导致表情只能追加到文本末尾。
别担心,这个问题也可以解决,我们给表情按钮以及弹出的表情列表层最外层元素都增加两个HTML属性即可。
属性是:unselectable="on" onmousedown="return false;"
然后再来的问题就是,如何能将选择到的元素插入到可编辑div中的光标位置呢?我在百度上搜索,找到了解决办法:
function insertAtCursor(dom, html) { if (dom != document.activeElement) { // 如果dom没有获取到焦点,追加 dom.innerHTML = dom.innerHTML + html; return; } var sel, range; if (window.getSelection) { // IE9 或 非IE浏览器 sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); // Range.createContextualFragment() would be useful here but is // non-standard and not supported in all browsers (IE9, for one) var el = document.createElement("div"); el.innerHTML = html; var frag = document.createDocumentFragment(), node, lastNode; while ((node = el.firstChild)) { lastNode = frag.appendChild(node); } range.insertNode(frag); // Preserve the selection if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } } else if (document.selection && document.selection.type != "Control") { // IE < 9 document.selection.createRange().pasteHTML(html); } }
另外再给一份针对texterea中在光标位置插入Text内容的代码:
function insertValueAtCursor(myField, insertContent) { if (myField != document.activeElement) { myField.value = myField.value + insertContent; return; } //IE support if (document.selection) { myField.focus(); var sel = document.selection.createRange(); sel.text = insertContent; sel.select(); } //MOZILLA/NETSCAPE support else if (typeof myField.selectionStart === 'number' || typeof myField.selectionEnd == 'number') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; console.log("startPos:" + startPos) // save scrollTop before insert var restoreTop = myField.scrollTop; myField.value = myField.value.substring(0, startPos) + insertContent + myField.value.substring(endPos, myField.value.length); if (restoreTop > 0) { // restore previous scrollTop myField.scrollTop = restoreTop; } myField.focus(); myField.selectionStart = startPos + insertContent.length; myField.selectionEnd = startPos + insertContent.length; } else { console.log('OK') myField.value += insertContent; myField.focus(); } }
最后我有一个例子,在附件中,下载下来,打开index.html或editor.html都能看到效果。
值得注意的是,上述代码只针对IE9以上版本以及chrome,firefox等支持HTML5的浏览器有效,IE8中做不到在光标位置插入图片。
如果要兼容IE8.0我找到了解决办法,就是不止是在父元素有这个属性就行,还需要在鼠标点击的那个元素加上这两个属性就OK。我把附件替换了,大家可以参考。
相关推荐
vue项目中在可编辑div光标位置插入内容 html: <div class=mouse-move dragstart=dragStart($event, draggable='true' v-for=(item, key=index click=dropRelease($event,> {{item.labelName}} </div> <div ...
关于在可编辑的div中插入内容到光标位置的知识点可以详细展开为以下几点: 1. 可编辑的div(contenteditable):HTML5新增了一个全局属性contenteditable,它可以使网页元素变得可编辑。通过将contenteditable设置...
主要是div通过contenteditable实现可编辑状态,可以实现按钮点击在光标处添加字符的功能
在网页开发中,常常需要获取用户在输入框、文本区域或可编辑的div元素中光标的位置,以便实现某些特定功能。由于不同浏览器(如IE、Firefox和Chrome)之间存在兼容性差异,因此统一实现这一功能具有一定的挑战性。...
这个好说… 但是清空完了内容,光标居然跑到了最前面,这就很头疼了。 在经过各种搜索之后,找到了解决办法,不多说,上代码! var _div = document.querySelector('.discuss_area'); var range = document....
最近在网上碰到一个人问了我一个问题,在可...要使div可编辑 必须 加入 contentEditable="true" 这个属性。 然后就是获取光标位置(或者选择文字位置)进行文字或者html的插入 。 由于火狐等标准浏览器支持getSelectio
总结而言,通过使用上述方法,我们可以在Vue中有效地控制div[contenteditable=true]元素的光标位置,从而提升用户的编辑体验。这个方法特别适合于需要动态更新内容的富文本编辑器组件。希望上述内容对使用Vue开发...
它的一个独特功能是在编辑器失去焦点后,用户仍能在之前的位置插入图片,这在很多编辑器中并不常见。那么,它是如何实现这一功能的呢?本文将深入探讨其背后的实现机制。 首先,我们需要了解在JavaScript中处理文本...
AP DIV是一个网页内容的容器,可以包含文本、图像、以及其他任何能在HTML文档中插入的元素,并且能够精确地定位在网页的任意位置。本教程将详细讲解如何在Dreamweaver CS5中创建、编辑和应用AP DIV元素。 1. 创建AP...
3. **内容输入**:光标定位在AP DIV层内,可以输入文本或插入图像等其他元素。 4. **定位**:AP DIV层可通过直接拖动或输入坐标值进行精确定位。 5. **代码查看**:AP DIV层的HTML代码由`<div>`标签及CSS样式组成,...
2. 将光标定位在希望插入表格的位置。 3. 选择“插入”菜单,然后选择“表格”。 4. 在弹出的【表格】对话框中设置表格的行数、列数和宽度,点击“确定”即可插入表格。 #### 7.1.2 输入数据 插入表格后,直接在...
需要注意的是,这些操作仅适用于文本输入元素,对于非可编辑元素,如`<div contenteditable="true">`,光标操作方式会有所不同。此外,考虑到兼容性问题,这些操作在不同的浏览器中可能存在差异,实际使用时需要做...
- `UM.insertHtml(html)`:在光标位置插入HTML代码。 - `UM.execCommand(commandName, param)`:执行特定的编辑命令,如`'insertimage'`用于插入图片。 - `UM.selection.getRange()`:获取当前选区范围对象。 - `UM....
4. 当用户点击表情按钮时,调用一个方法来在当前光标位置插入表情的表示形式,这可以通过JavaScript操作DOM来实现,如示例代码中使用`insertEmojAtCaret`函数所示。 5. 考虑到截图功能,可以利用Electron提供的API,...
- `insertHtml(html)`:在光标位置插入HTML代码。 - `execCommand(commandName)`:执行指定的命令,如`bold`(加粗)、`italic`(斜体)等。 - `focus()`:使编辑器获取焦点。 - `blur()`:取消编辑器的焦点。 #...
在本示例中,如果按下回车键(keyCode为13),则会在当前光标位置插入换行符,并将光标移动到下一行的起始位置。 然后,将这个函数绑定到iframe的onkeypress事件中,从而在用户输入时触发相应的逻辑。 2. 拖拽图片...