欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-06 08:29:49
...

光标在最后的代码实现:

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 TextComment, 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);