`

可编辑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可编辑模式在光标位置插入内容

    标题中的“DIV可编辑模式在光标位置插入内容”指的是在HTML中,使用`contenteditable`属性将一个`&lt;div&gt;`元素设置为可编辑区域,允许用户直接在该区域内输入或编辑文本。这个功能常用于富文本编辑器、在线文档编辑等...

    vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容 html: &lt;div class=mouse-move dragstart=dragStart($event, draggable='true' v-for=(item, key=index click=dropRelease($event,&gt; {{item.labelName}} &lt;/div&gt; &lt;div ...

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

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

    可编辑并且能够自动换行的div

    标题所提到的“可编辑并且能够自动换行的div”,实际上是在讨论如何创建一个具有文本编辑功能的 `div` 元素,并且在用户输入文字时能自动换行,保持其形状不变。这涉及到 HTML、CSS 以及可能的 JavaScript 技术。 ...

    js限制DIV输入回车

    在网页开发中,有时我们需要对用户的输入进行特定的控制,比如限制用户在某个特定的`div`元素中按下回车键时的行为。标题"js限制DIV输入回车"所涉及的知识点,就是如何使用JavaScript来阻止或改变`div`内的回车事件...

    Vue中div contenteditable 的光标定位方法

    然而,当我们在Vue组件中处理这种输入时,经常遇到光标定位的问题,尤其是在程序控制下非人工输入后光标会丢失的问题。接下来将详细解释在Vue中如何控制div元素contenteditable的光标定位方法。 1. Vue中div...

    可编辑的DIV

    可编辑的DIV;可输入图片地址直接显示图片;可以输入文字;等等;

    在可编辑div中插入文字或图片解决思路与实现步骤

    最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用,基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码。 基本上编辑...

    js之向div contenteditable光标位置添加字符.html

    主要是div通过contenteditable实现可编辑状态,可以实现按钮点击在光标处添加字符的功能

    JS在可编辑的div中的光标位置插入内容的方法

    总的来说,处理可编辑div的光标位置和插入内容涉及到对DOM操作和选区对象的深入理解,这在开发富文本编辑器或者类似功能时是非常重要的。通过这些方法,开发者可以创建出功能强大的文本编辑组件,提供给用户类似Word...

    div边框加文字效果

    div边框加文字效果

    移动端模拟数字键盘,保留两位小数,div模拟光标,div模拟input

    例如,添加动画效果使键盘弹出更自然,设置合理的输入限制防止用户误操作,以及提供清晰的错误提示等。 10. **测试**:最后,进行全面的测试,包括单元测试、集成测试和用户体验测试,以确保所有功能正常运行,且...

    jQuery设置聚焦并使光标位置在文字最后的实现方法

    // 聚焦并设置光标到文字最后 myInput.focusEnd(); ``` 这段代码会找到ID为`myInput`的输入元素,然后聚焦这个元素并将光标置于文字的最后。这个功能在各种动态表单或编辑器应用中非常有用,例如在添加新行后让用户...

    html select 可输入 可编辑

    在网页设计中,HTML元素是构建...在实际应用中,你可以根据需求进一步定制这个组件,例如添加自动完成功能、限制输入内容、处理输入错误等。这个`select_edit.html`文件可能就包含了上述代码的示例,供你参考和实践。

    DIV弹出层+定位

    在这个“DIV弹出层+定位”的例子中,我们关注的是如何利用`DIV`来创建一个可滑动的弹出层,并且使其在页面上保持固定的位置。这种功能通常用于显示提示信息、模态对话框或者加载额外的内容。 首先,`DIV弹出层`是指...

    js+div实现文字滚动和图片切换效果代码.docx

    - 使用CSS设置Div的样式,如宽度、高度、溢出隐藏等,以限制文字的可视区域。 - 通过JS定时器(setInterval)来更新Div内的文字,模拟滚动效果。例如,每次移动一定字符数,然后替换回原始文字,形成循环滚动的...

    div弹出层 定位问题的 处理

    在网页设计中,`div` 弹出层(也称为模态框或对话框)是一种常用的交互元素,用于展示重要信息、用户确认操作或者提供额外的功能。然而,为`div`弹出层进行准确的定位可能会遇到一些挑战,因为这涉及到CSS布局、...

Global site tag (gtag.js) - Google Analytics