光标在最后的代码实现:
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
Node
where the Range
should start.
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可编辑模式在光标位置插入内容”指的是在HTML中,使用`contenteditable`属性将一个`<div>`元素设置为可编辑区域,允许用户直接在该区域内输入或编辑文本。这个功能常用于富文本编辑器、在线文档编辑等...
vue项目中在可编辑div光标位置插入内容 html: <div class=mouse-move dragstart=dragStart($event, draggable='true' v-for=(item, key=index click=dropRelease($event,> {{item.labelName}} </div> <div ...
当输入内容超过限制的时候,清空用户输入超过限制后的内容。 这个好说… 但是清空完了内容,光标居然跑到了最前面,这就很头疼了。 在经过各种搜索之后,找到了解决办法,不多说,上代码! var _div = document....
标题所提到的“可编辑并且能够自动换行的div”,实际上是在讨论如何创建一个具有文本编辑功能的 `div` 元素,并且在用户输入文字时能自动换行,保持其形状不变。这涉及到 HTML、CSS 以及可能的 JavaScript 技术。 ...
在网页开发中,有时我们需要对用户的输入进行特定的控制,比如限制用户在某个特定的`div`元素中按下回车键时的行为。标题"js限制DIV输入回车"所涉及的知识点,就是如何使用JavaScript来阻止或改变`div`内的回车事件...
然而,当我们在Vue组件中处理这种输入时,经常遇到光标定位的问题,尤其是在程序控制下非人工输入后光标会丢失的问题。接下来将详细解释在Vue中如何控制div元素contenteditable的光标定位方法。 1. Vue中div...
可编辑的DIV;可输入图片地址直接显示图片;可以输入文字;等等;
最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用,基本不会去研究源代码。后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码。 基本上编辑...
主要是div通过contenteditable实现可编辑状态,可以实现按钮点击在光标处添加字符的功能
总的来说,处理可编辑div的光标位置和插入内容涉及到对DOM操作和选区对象的深入理解,这在开发富文本编辑器或者类似功能时是非常重要的。通过这些方法,开发者可以创建出功能强大的文本编辑组件,提供给用户类似Word...
div边框加文字效果
例如,添加动画效果使键盘弹出更自然,设置合理的输入限制防止用户误操作,以及提供清晰的错误提示等。 10. **测试**:最后,进行全面的测试,包括单元测试、集成测试和用户体验测试,以确保所有功能正常运行,且...
// 聚焦并设置光标到文字最后 myInput.focusEnd(); ``` 这段代码会找到ID为`myInput`的输入元素,然后聚焦这个元素并将光标置于文字的最后。这个功能在各种动态表单或编辑器应用中非常有用,例如在添加新行后让用户...
在网页设计中,HTML元素是构建...在实际应用中,你可以根据需求进一步定制这个组件,例如添加自动完成功能、限制输入内容、处理输入错误等。这个`select_edit.html`文件可能就包含了上述代码的示例,供你参考和实践。
在这个“DIV弹出层+定位”的例子中,我们关注的是如何利用`DIV`来创建一个可滑动的弹出层,并且使其在页面上保持固定的位置。这种功能通常用于显示提示信息、模态对话框或者加载额外的内容。 首先,`DIV弹出层`是指...
- 使用CSS设置Div的样式,如宽度、高度、溢出隐藏等,以限制文字的可视区域。 - 通过JS定时器(setInterval)来更新Div内的文字,模拟滚动效果。例如,每次移动一定字符数,然后替换回原始文字,形成循环滚动的...
在网页设计中,`div` 弹出层(也称为模态框或对话框)是一种常用的交互元素,用于展示重要信息、用户确认操作或者提供额外的功能。然而,为`div`弹出层进行准确的定位可能会遇到一些挑战,因为这涉及到CSS布局、...