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. ...
随机推荐
- ASP.NET MVC Castle Windsor 教程
一.[转]ASP.NET MVC中使用Castle Windsor 二.[转]Castle Windsor之组件注册 平常用Inject比较多,今天接触到了Castle Windsor.本篇就来体验其 ...
- C# ThreadStart和ParameterizedThreadStart区别
ThreadStart: ThreadStart这个委托定义为void ThreadStart(),也就是说,所执行的方法不能有参数.ThreadStart threadStart=new Threa ...
- Yii2 响应部分 response
当应用完成处理一个请求后, 会生成一个yii\web\Response响应对象并发送给终端用户 响应对象包含的信息有HTTP状态码,HTTP头和主体内容等, 网页应用开发的最终目的本质上就是根据不同的 ...
- hive 配置元数据以mysql 存储
<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="confi ...
- [原创]解决jQuery.live在mobile safari(iphone / ipad / ipod)绑定失败的问题
解决方案: 给要使用live绑定事件的元素,添加“cursor:pointer”样式即可! 如: a,input,td{cursor:pointer;} 原文链接:http://bugs.jquery ...
- 在Android平台下搭建PhoneGap开发环境--用HTML5开发游戏
一.在Android平台下搭建PhoneGap开发环境具体怎么搭建我这里就不详细说了,如有需要我后面再讲 . PhoneGap 官方地址有详细说明:http://www.phonegap.com. 在 ...
- thikphp5.0 ip地址库 解决卡顿问题 curl_init
使用淘宝新浪的地址库非常的使用,但是调用有时候会出现很慢.会导致卡在当前网页. 要想不影响当前速度,因此要使用 curl_init功能. 项目案例:会员登陆日志 user_log 字段:id,user ...
- 升级到yosemite后homebrew报错的解决
报错会如下: /usr/local/bin/brew: /usr/local/Library/brew.rb: /System/Library/Frameworks/Ruby.framework/Ve ...
- Java并发包学习一 ThreadFactory介绍
ThreadFactory翻译过来是线程工厂,顾名思义,就是用来创建线程的,它用到了工厂模式的思想.它通常和线程池一起使用,主要用来控制创建新线程时的一些行为,比如设置线程的优先级,名字等等.它是一个 ...
- 2 go语言的基础
include 内置关键字 注释方法 代码结构(常量,变量,接口,函数的定义) 导入包以及包别名 可见性规则 小练习 内置关键字(25个均为小写) break case chan const cont ...