/**
* @description 模拟鼠标选中页面文本。
* 把el{DOMElement}节点设置为选中状态。
* 如果text不为空,则仅选中el中的text文本。
* @author shawn
*/
function selectDomText(el,text) {
if(!el)
return;
if(text){
if(/MSIE ([^;]+)/.test(navigator.userAgent)){
var range = document.body.createTextRange();
range.moveToElementText(el);
var found = range.findText(text);
if(found){
range.execCommand('selectAll');
}
}else{
var t = el.firstChild;
if(t && t.nodeType == 3){
var range = document.createRange();
var str = t.nodeValue;
range.selectNode(t);
var idx = str.indexOf(text);
if(idx != -1){
var selObj = window.getSelection();
selObj.removeAllRanges();
range.setStart(t,idx);
range.setEnd(t,idx + text.length);
selObj.addRange(range);
}
}
}
}else{
if (window.getSelection) { // all browsers, except IE before version 9
var selection = window.getSelection ();
selection.selectAllChildren (el);
} else { // Internet Explorer before version 9
var range = document.body.createTextRange ();
range.moveToElementText (el);
range.select();
}
}
}
/**
*获取选中的文本,支持body/input/textarea元素。
*/
function getSelText(){
var selText = "";
if (window.getSelection) { // all browsers, except IE before version 9
if (document.activeElement &&
(document.activeElement.tagName.toLowerCase () == "textarea" ||
document.activeElement.tagName.toLowerCase () == "input"))
{
var text = document.activeElement.value;
selText = text.substring (document.activeElement.selectionStart,
document.activeElement.selectionEnd);
}
else {
var selRange = window.getSelection ();
selText = selRange.toString ();
}
}
else {
if (document.selection.createRange) { // Internet Explorer
var range = document.selection.createRange ();
selText = range.text;
}
}
return selText;
}
//选择文本框里面的字符
function selectText(textbox, startIndex, stopIndex){
if (textbox.setSelectionRange){
textbox.setSelectionRange(startIndex, stopIndex);
} else if (textbox.createTextRange){
var range = textbox.createTextRange();
range.collapse(true);
range.moveStart(“character”, startIndex);
range.moveEnd(“character”, stopIndex - startIndex);
range.select();
}
textbox.focus();
}
分享到:
相关推荐
**Jsoup库解析HTML、XML或URL链接中的DOM节点** Jsoup是一款强大的Java库,它设计用于处理实际世界中的HTML,使得开发者可以方便地提取和操作数据。在Web开发中,有时我们需要从网页中获取特定信息,比如文章内容、...
总之,理解并熟练掌握DOM节点操作对于任何JavaScript开发者来说都是至关重要的,无论是在简单的页面交互还是复杂的Web应用程序中,这些基本操作都是构建动态用户界面的基础。通过DOM,我们可以实现诸如响应式设计、...
然后通过`$div[0]`和`$div.get(0)`两种方式分别获取了纯粹的DOM节点,并使用JavaScript的`alert()`函数显示了其中的文本内容。可以看到,两种方式都能达到相同的效果。 ### 结语 在进行Web开发时,合理利用jQuery...
首先,jQuery提供了简便的方式来创建DOM节点。创建元素节点通常通过HTML字符串描述并传递给`$()`函数,如`$("<div></div>")`创建了一个空的`<div>`元素。如果要同时创建文本节点,可以直接将文本内容包含在HTML字符...
3. atomicselection:指定元素及其内容是否可以作为一个不可见单位被选中,通常用于编辑器或富文本组件。 4. begin:设置或获取时间线在该元素上播放前的延迟时间,适用于多媒体元素的同步。 5. blockDirection:...
这个示例展示了JavaScript动态操作DOM的强大能力,允许用户在页面上直接编辑文本,提高了用户体验。在实际项目中,这种功能可以应用于笔记、评论编辑等场景,让用户更方便地交互和修改内容。理解并掌握这种技术对于...
在案例分析中,提到了两个列表的移动操作,这可能涉及到DOM节点的移除和插入。例如,可以使用`removeChild`移除一个选项(option)节点,再使用`appendChild`或`insertBefore`将其添加到新的位置。同时,`innerHTML`...
例如,当用户选中一段文本并点击加粗按钮时,编辑器会找到选中的文本节点,并添加`<strong>`标签来实现加粗效果。 4. **数据存储与传输**:编辑的内容需要被保存到服务器或者本地存储,通常以HTML格式进行传输。在`...
在网页开发中,DOM(Document Object Model)是一个关键的概念,它是一种标准的、与语言无关的接口,用于表示HTML或XML文档的结构,并允许程序和脚本动态地访问和更新文档的内容、结构和样式。本篇文章将围绕"如何...
DOM节点可以是元素节点、属性节点、文本节点等。 - **jQuery对象**: 通过jQuery函数包装过的DOM元素集合。jQuery对象并不是DOM对象,但它可以使用jQuery定义的方法对DOM元素进行操作。 #### 2. jQuery DOM操作方法 ...
- 复选框与节点文本结合,可以通过CSS定位使其看起来一体化。 2. **CSS样式**: - CSS用来设置树的视觉样式,包括节点间的缩进、复选框的位置、展开/折叠箭头等。 - 使用`:checked`伪类来改变选中状态下的样式。...
6. `document.createTextNode(text)`: 创建包含文本的新文本节点。 7. `document.appendChild(node)`: 把一个节点添加到父节点的子节点列表末尾。 8. `document.removeChild(node)`: 删除给定的子节点。 9. `...
通过JavaScript操作div的样式和内容,可以实现节点的展开、折叠、选中等交互效果。 3. JavaScript: JavaScript是实现这个动态目录树的关键。它负责处理用户交互,如点击事件,以及与服务器进行AJAX通信。...
7. **JQuery的辅助功能**:JQuery提供了丰富的DOM操作API,如`.append()`用于添加节点,`.remove()`用于删除节点,`.toggleClass()`用于切换节点的选中状态等,这些都为DTree的动态操作提供了便利。 综上所述,...
在网页动态交互中,创建和操作DOM节点是常见的任务,jQuery和JavaScript提供了不同的方式来实现这一目标。本文将深入探讨jQuery与JavaScript在创建节点方面的差异。 首先,理解DOM(Document Object Model)是至关...
- `$("input[type='text']")` 选择所有文本输入框。 2. **链式操作(Chaining)**: 选中的元素集合可以链式调用jQuery方法,这提高了代码的可读性和效率。例如: ```javascript $("#myDiv").hide().slideUp();...
首先,DOM是一个树形结构,其中每个节点代表了文档的一个部分,例如元素、属性或文本。通过JavaScript,我们可以使用`document.getElementById`、`document.querySelector`或`document.querySelectorAll`等方法来...
- **功能**:为选中的元素添加一个或多个类名。 - **示例**:`$("p").addClass("highlight");` 2. **设置属性(`attr()`)** - **语法**:`$("selector").attr("attribute", "value");` - **功能**:设置元素的...
3. 通过DOM节点的父节点或者自身来获取与编辑元素相对应的标签名称。 4. 根据标签名称判断光标位置的获取方式。例如,对于textarea和input text,直接使用element.selectionStart获取位置;对于div编辑框,需要...