`

可编辑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 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);
分享到:
评论

相关推荐

    当div设置contentEditable=true时,重置其内容后无法光标定位

    当输入内容超过限制的时候,清空用户输入超过限制后的内容。   这个好说… 但是清空完了内容,光标居然跑到了最前面,这就很头疼了。 在经过各种搜索之后,找到了解决办法,不多说,上代码! var _div = document....

    光标的定位与获取

    1. 文本编辑:在文字处理软件中,光标用于指示输入点,用户可以通过键盘操作或鼠标点击定位光标,进行文字的编辑。 2. 图形用户界面:在GUI应用中,光标作为用户的交互标志,如拖放操作、选择区域等。 3. 游戏开发:...

    delphi 开发经验技巧宝典源码

    0208 在DataGrid中如何使标题文字居中 138 0209 如何把ListBox中的内容拖曳到另一个ListBox中 139 0210 把DBGrid中的数据赋给数组 139 0211 如何获取DataGrid单元格中的内容 140 0212 如何锁定文本框中的...

    delphi 开发经验技巧宝典源码06

    0208 在DataGrid中如何使标题文字居中 138 0209 如何把ListBox中的内容拖曳到另一个ListBox中 139 0210 把DBGrid中的数据赋给数组 139 0211 如何获取DataGrid单元格中的内容 140 0212 如何锁定文本框中的...

    易语言程序免安装版下载

    修改高级表格支持库,在双击单元格进入编辑状态后,不能收到第一个“字符输入”事件的BUG。 2. OpenGL支持库中的部分英文名称常量已改为中文,并统一在所有常量名称之前加前缀“GL_”,以减少与其它库的冲突机率。...

    autocad快速鍵教學

    切换正交模式,限制光标移动到水平或垂直方向。 ### 94. 捕捉开关/Ctrl+B 开启或关闭对象捕捉功能,提高绘图的精度。 ### 95. 极轴开关/Ctrl+U 启用极轴追踪,方便绘制与指定角度相关的线段。 ### 96. 对象捕捉...

Global site tag (gtag.js) - Google Analytics