光标在最后的代码实现:
http://qa.helplib.com/606846
http://jsfiddle.net/timdown/vXnCM/
<div id="editable" contenteditable="true">
text text text<br>text text text<br>text text text<br>
</div>
<div class="tip" id="tip"></div>
<button id="button" onclick="setCaret()">focus</button>
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
----------
长度限制代码:
$("#editable").keyup(words_deal);
function words_deal() {
var editable = $('#editable');
var editableHtml = $.trim(editable.html());
var curLength=editableHtml.getBytesLength();
if(curLength > maxLength) {
editable.html(editableHtml.substr(0,maxLength));
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[0], maxLength);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
else {
$("#tip").text(maxLength-curLength);
}
}
//utf-8 一个汉字占3个字节,所以是---
String.prototype.getBytesLength = function() {
return this.replace(/[^\x00-\xff]/gi, "---").length;
}
其他例子:转自:http://www.softwhy.com/forum.php?mod=viewthread&tid=8303
The Range.setStart()
method sets the start position of a Range
.
If the startNode
is a Node
of type Text
, Comment
, or CDATASection
, then startOffset
is the number of characters from the start of startNode
. For other Node
types, startOffset
is the number of child nodes between the start of the startNode
.
Setting the start point below (lower in the document) the end point will result in a collapsed range with the start and end points both set to the specified start position.
SyntaxEDIT
range.setStart(startNode, startOffset);
Parameters
Node
where the Range
should start.
Range
from the start of startNode
.ExampleEDIT
var range = document.createRange();
var startNode = document.getElementsByTagName("p").item(2);
var startOffset = 0;
range.setStart(startNode,startOffset);
相关推荐
vue项目中在可编辑div光标位置插入内容 html: <div class=mouse-move dragstart=dragStart($event, draggable='true' v-for=(item, key=index click=dropRelease($event,> {{item.labelName}} </div> <div ...
NULL 博文链接:https://canlynet.iteye.com/blog/2340751
当输入内容超过限制的时候,清空用户输入超过限制后的内容。 这个好说… 但是清空完了内容,光标居然跑到了最前面,这就很头疼了。 在经过各种搜索之后,找到了解决办法,不多说,上代码! var _div = document....
一个div可自行编辑,任意输入文字可自动换边且不变形
可编辑的DIV;可输入图片地址直接显示图片;可以输入文字;等等;
利用JS限制 DIV中输入回车换行 可以更改回车的功能比如敲回车输入你好我好大家好之类的
主要介绍了JS在可编辑的div中的光标位置插入内容的方法,分别用js与jQuery两种方式加以实现,是非常实用的特效技巧,需要的朋友可以参考下
可移动的DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV可移动DIV...
div边框加文字效果
今天小编就为大家分享一篇Vue中div contenteditable 的光标定位方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用,基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码。 基本上编辑...
div弹出层 定位问题的 处理
这个例子是,div弹出层并且固定位置,弹出层的弹出方式为滑动方式。
有的时候flash上放div的话;在div里边在放文字的话;div的文字会不显示的;本实例就是为了解决这个问题写的实例;希望和我一样遇到这问题的朋友能帮到你们;
利用JS实现可拖动的DIV效果,在原有基础上增加的限制在一定区域内的效果。方便,易用。可以很方便地移动到您的工程里面
点击文字弹出一个DIV层窗口代码,下载就能用