可编辑div 限制文字输入,并且光标定位在文字最后
光标在最后的代码实现:
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
- startNode
- The
Node
where theRange
should start. -
startOffset
- An integer greater than or equal to zero representing the offset for the start of the
Range
from the start ofstartNode
.
ExampleEDIT
var range = document.createRange();
var startNode = document.getElementsByTagName("p").item(2);
var startOffset = 0;
range.setStart(startNode,startOffset);
上一篇: 教你组装电脑机箱与主板跳线接法图解析