可编辑div 限制文字输入，并且光标定位在文字最后

最新推荐文章于 2023-11-16 15:58:21 发布

原创最新推荐文章于 2023-11-16 15:58:21 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #输入长度限制 #光标位置 #ViewUI

js 可编辑div 光标在最后专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现在可编辑div中限制输入文字的长度，并确保光标始终位于文字末尾。通过创建range和设置selection来定位光标，同时在输入超过限制时截断内容并更新光标位置。

光标在最后的代码实现：

http://qa.helplib.com/606846

http://jsfiddle.net/timdown/vXnCM/

text text text<br>text text text<br>text text text<br>

</div>

<button id="button" οnclick="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 the Range should start.

startOffset

An integer greater than or equal to zero representing the offset for the start of the 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);