div里粘贴文字后,移动光标至最后
cursormanager.js
//Namespace management idea from http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/
(function( cursorManager ) { //From: http://www.w3.org/TR/html-markup/syntax.html#syntax-elements
var voidNodeTags = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX']; //From: http://stackoverflow.com/questions/237104/array-containsobj-in-javascript
Array.prototype.contains = function(obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return true;
}
}
return false;
} //Basic idea from: http://stackoverflow.com/questions/19790442/test-if-an-element-can-contain-text
function canContainText(node) {
if(node.nodeType == 1) { //is an element node
return !voidNodeTags.contains(node.nodeName);
} else { //is not an element node
return false;
}
}; function getLastChildElement(el){
var lc = el.lastChild;
while(lc && lc.nodeType != 1) {
if(lc.previousSibling)
lc = lc.previousSibling;
else
break;
}
return lc;
} //Based on Nico Burns's answer
cursorManager.setEndOfContenteditable = function(contentEditableElement)
{ while(getLastChildElement(contentEditableElement) &&
canContainText(getLastChildElement(contentEditableElement))) {
contentEditableElement = getLastChildElement(contentEditableElement);
} var range,selection;
if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
{
range = document.createRange();//Create a range (a range is a like the selection but invisible)
range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
selection = window.getSelection();//get the selection object (allows you to change selection)
selection.removeAllRanges();//remove any selections already made
selection.addRange(range);//make the range you have just created the visible selection
}
else if(document.selection)//IE 8 and lower
{
range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
range.select();//Select the range (make it the visible selection
}
} }( window.cursorManager = window.cursorManager || {}));
<div contenteditable="true" class="text" id="content" v-on:keyup="triggerKeyup" v-on:paste="triggerPaste">
triggerPaste:function(e) {
if (plus.os.name == "iOS") {
var clipboardData, pastedData; // Stop data actually being pasted into div
e.stopPropagation();
e.preventDefault(); // Get pasted data via clipboard API
clipboardData = e.clipboardData || window.clipboardData;
pastedData = clipboardData.getData('Text');
//rDataHTML = clipboardData.getData('text/html');
//rDataPText = clipboardData.getData('text/plain'); document.getElementById('content').innerHTML = document.getElementById('content').innerHTML + pastedData; cursorManager.setEndOfContenteditable(document.getElementById('content'));
}
},
div里粘贴文字后,移动光标至最后的更多相关文章
- “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法
最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...
- 让透明div里的文字不透明
最近在工作中遇到一个问题,我在div里写上文字,当我把div变为半透明的时候,里面的文字也会随之透明.情况如下: <div class="box"> 这是一段不应该透明 ...
- 【小瑕疵】在div里插入img后在底部留有缝隙怎么解决
[本文转载自http://blog.sina.com.cn/s/blog_9fd5b6df01013mld.html] 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图 ...
- source insight 里编辑的时候,每次粘贴后,光标停留在粘贴内容的左面
在source insight 里编辑的时候,每次粘贴后,光标停留在粘贴内容的左面.我想把它设定为 粘贴后,光标移动倒粘贴内容的右面. 该怎么做? 这是个设置问题,按照下面的步骤设定就可以了. Opt ...
- div可编辑框,去除粘贴文字样式😄
上个月做了个聊天的需求(网页版的).说到聊天都想到输入框,说到输入框都会想到input,但是input标签是不支持插入图片的(包括areatext标签).查阅了一些资料就看到div标签有一个属性con ...
- 实现图标Icon+文字在div里自动中心居中(水平垂直居中)
已知div行高设置text-align:center文字会自动居中. 通过:before来设置icon的地址和高宽. 需要设置图片默认的垂直居中条件,与文字一致,为text-bottom. 设置图片行 ...
- 微信小程序-输入框输入文字后,将光标移到文字中间,接着输入文字后光标又自动跳到最后
问题描述: input输入框输入一段文字后,将光标移到文字中间,接着输入文字后光标又自动跳到最后去了. 原因: input事件中,给input框绑定任何事件后,在处理事件时 setData之后就会让光 ...
- Xshell用鼠标选中一段文字后自动换行的问题
JavaScript HTML(CSS) ASP 跨浏览器开发 IIS Apache vbScript JavaScript 应用服务器 XML/XSL 其他 CGI Ajax 非技术区 Cold ...
- div中让文字垂直居中
在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...
随机推荐
- Linux系统教程:设置GRUB菜单密码
1.认识启动配置选项 [root@server5 ~]# cat /boot/grub/grub.conf # grub.conf generated by anaconda # # Note ...
- 作为一枚第二天上班的小小.net程序员(技术宅的那种)很迷茫哦,第一个随笔
作为一枚第二天上班的小小.net程序员(技术宅的那种)很迷茫哦,第一个随笔
- cocos2d - Changing the image of a CCSprite
CCTexture2D* tex = [[CCTextureCache sharedTextureCache] addImage:@"new_image_name"]; [spri ...
- 【WP8】扩展CM的INavigationService方法
CM支持通过ViewModel进行导航,并通过支持参数传递,但是内部只是通过反射的方式构造Uri的参数进行导航,所以只支持简单类型的参数传递,下面对其进行扩展,在页面导航时支持复杂类型的参数传递,并扩 ...
- [转]Linux服务器上11种网络连接状态 和 TCP三次握手/四次挥手详解
一.Linux服务器上11种网络连接状态: 图:TCP的状态机 通常情况下:一个正常的TCP连接,都会有三个阶段:1.TCP三次握手;2.数据传送;3.TCP四次挥手. 注:以下说明最好能结合”图:T ...
- 如何在IntelliJ IDEA中快速配置Tomcat
近来使用idea编写java代码的人越来越多,最关键的就是idea强大的代码提示功能,能极高的提升程序员的开发效率,但是毕竟各有所长,idea中tomcat的配置就没有eclipse那么轻松,这里简单 ...
- Adobe超分辨率算法:SRNTT
论文:Image Super-Resolution by Neural Texture Transfer 论文链接:https://arxiv.org/abs/1903.00834 项目地址:http ...
- 通过MyEclipse部署web应用程序开发环境
1.下载并安装MyEclipse10 2.配置java开发的jar包 3.配置tomcat服务器 4.部署tomcat服务器 点击Bronse可以查看部署后的文件夹目录 5.启动tomcat服务器 6 ...
- js中push()的用法
定义和用法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. 语法 arrayObject.push(newelement1,newelement2,....,newelement ...
- 为什么React事件处理函数必须使用Function.bind()绑定this?
最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...