`
wing123
  • 浏览: 799716 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript中createTextRange用法(focus)

JavaScriptGo.net 
阅读更多



 


createtextrange createrange区别:


对象或元素不同，虽然都是返回TextRange。例如：


    var r=document.body.createTextRange()
    var r=document.createRange()
 

document. createTextRange 可以对body、TEXTAREA、BUTTON创建TextRange，Range -- 范围

 

返回createTextRange的text和htmlText

 

<script language="javascript">   
function test()   
{   
var rng=document.body.createTextRange();   
alert(rng.text)   
}   
function test1()   
{   
var rng=document.body.createTextRange();   
alert(rng.htmlText)   
}   
</script>   
<input type="button" onclick="test()" value="text">   
<input type="button" onclick="test1()" value="htmlText">

 

 

获取指定文本框中的选中的文字：只响应第一个文本框

 

<input id="inp1" type="text" value="1234567890">   
<input id="inp2" type="text" value="9876543210">   
<input type="button" onclick="test()" value="确定">   
<script language="javascript">   
function test()   
{   
var o=document.getElementById("inp1")   
var r = document.selection.createRange();   
if(o.createTextRange().inRange(r))   
alert(r.text);   
}   
</script>

 

 

页面文本倒序查找

 

abababababababa   
<input value="倒序查找a" onclick=myfindtext("a") type="button">   
<script language ='javascript'>   
var rng = document.body.createTextRange();   
function myfindtext(text)   
{   
rng.collapse(false);   
if(rng.findText(text,-1,1))   
{   
rng.select();   
rng.collapse(true);   
}else  
{alert("end");}   
}   
</script>

 

 

聚焦控件后把光标放到最后

 

<script language="javascript">    
function setFocus()    
{    
var obj = event.srcElement;    
var txt =obj.createTextRange();    
txt.moveStart('character',obj.value.length);    
txt.collapse(true);    
txt.select();    
}    
</script>    
<input type="text" value="http://toto369.net" onfocus="setFocus()">

 

 

得到文本框内光标位置

 

<script language="javascript">   
function getPos(obj){   
obj.focus();   
var s=document.selection.createRange();   
s.setEndPoint("StartToStart",obj.createTextRange())   
alert(s.text.length);   
}   
</script>   
<input type="text" id="txt1" value="1234567890">   
<input type="button" value="得到光标位置" onclick=getPos(txt1)>

 

 

 

控制input框内光标位置

 

<script language="javascript">   
function setPos(num)   
{   
text1.focus();   
var e =document.getElementById("text1");   
var r =e.createTextRange();   
r.moveStart('character',num);   
r.collapse(true);   
r.select();   
}   
</script>   
<input type="text" id="text1" value="1234567890">   
<select onchange="setPos(this.selectedIndex)">   
<option value="0">0</option>   
<option value="1">1</option>   
<option value="2">2</option>   
<option value="3">3</option>   
<option value="4">4</option>   
<option value="5">5</option>   
<option value="6">6</option>   
<option value="7">7</option>   
</select>

 

 

 

选中文本框中的一段文字

 

<script language=javascript>   
function sel(obj,num)   
{   
var rng=obj.createTextRange()   
var sel = rng.duplicate();   
sel.moveStart("character", num);   
sel.setEndPoint("EndToStart", rng);   
sel.select();   
}   
</script>   
<input type="text" id="text1" value="1234567890">   
<select onchange="sel(text1,this.value)">   
<option value="0">0</option>   
<option value="1">1</option>   
<option value="2">2</option>   
<option value="3">3</option>   
<option value="4">4</option>   
<option value="5">5</option>   
<option value="6">6</option>   
<option value="7">7</option>   
</select>

 

 

 

控制文本框内光标的移动

 

<input type="button" value="<" onclick=go(-1)>    
<input id="demo" value="这里是文字">   
<input type="button" value=">" onclick=go(1)>    
<script language="javascript">   
function go(n){   
demo.focus();   
with(document.selection.createRange())   
{   
moveStart("character",n);   
collapse();   
select();   
}   
}   
</script>

 

 

取光标位置

 

<body>  
<div id=box>点击textarea</div>    
<mce:script type="text/javascript"><!--   
function doit()   
{   
 var rng = event.srcElement.createTextRange();    
 rng.moveToPoint(event.x,event.y);    
 rng.moveEnd("character",event.srcElement.value.length)    
 box.innerText = "光标位置：" + (event.srcElement.value.length - rng.text.length)   
}   
// --></mce:script>  
<textarea onclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf

 

 

       在文本框中设置内容后，在将选定的文本删除

 

<script> 
  function storeCaret (textEl) {
    
    if (textEl.createTextRange) 
    textEl.caretPos = document.selection.createRange().duplicate(); 
  
  }
  
  function insertAtCaret (textEl, text) {
  
    if (textEl.createTextRange && textEl.caretPos) {
    var caretPos = textEl.caretPos;
    caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?text + ' ' : text; 
  } else 
    textEl.value = text;
  } 
  
  function deleteAtCaret (textEl) {
  
    if (textEl.createTextRange && textEl.caretPos) {
    var caretPos = textEl.caretPos;
    document.selection.clear();
  }

  //alert(aForm.aTextArea. 
  } 

</script> 

<form name=aForm>
<input name=aTextArea size=120 wrap=soft onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" value=这是例子，你可以在这里添加文字、插入文字。> 
<br> 
<input type=text name=aText size=80 value=我要在光标处插入这些文字><br>
<input type=button value=我要在光标处插入上面文本框里输入的文字！ onclick="insertAtCaret(this.form.aTextArea, this.form.aText.value);">
<input type=button value=删除选中文字 onclick=deleteAtCaret(this.form.aTextArea); id=button1 name=button1>
</FORM>

 

 

 

  • 大小: 3.9 KB
分享到：
| location的各个属性
评论
2 楼 yizishou 2016-09-18  
IE9- Only
1 楼 zuoming99 2011-04-08  
IEOnly
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript获得光标所在的文本框(text textarea)中的位置.docx

    - **`createTextRange()`方法**（IE特有）**：**用于创建一个表示文档中一段文本的`TextRange`对象，并且可以用来移动光标位置或选中文本。 3. **兼容性考虑**： - 不同浏览器对于获取光标位置的支持程度不一，...

    B S模式项目中常用的javascript汇总.docx

    ### B/S模式项目中常用的JavaScript知识点汇总 #### 一、屏幕右键禁用与自定义功能 在B/S模式项目中，为了保护网站内容不被轻易复制或出于用户体验的考虑，开发者可能会选择禁用浏览器的右键菜单。这可以通过以下...

    JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容

    在JavaScript中，我们可以使用以下方法来获取和操作这些信息： **获取焦点光标位置**： ```javascript function getCursorPos(input) { if (input.selectionStart) { // Modern browsers return input....

    页面一载入光标定位到文本框,并选中其中文字

    这段代码首先获取了ID为`searchInput`的元素，然后在`DOMContentLoaded`事件触发时调用`focus()`方法使光标定位到文本框，接着通过`setSelectionRange`或`createTextRange`（针对不支持`setSelectionRange`的IE浏览...

    javascript textarea光标定位方法(兼容IE和FF)

    总结起来，JavaScript 的 textarea 光标定位涉及到 `setSelectionRange` 和 `createTextRange` 这两种方法，通过条件判断实现跨浏览器兼容性。理解和掌握这些方法，可以帮助开发者在各种浏览器环境中提供一致的用户...

    javascript 设置文本框中焦点的位置

    本文将详细介绍如何使用JavaScript来设置文本框中焦点的位置。 #### 实现原理 设置文本框中焦点的位置主要是通过操作`&lt;input&gt;`元素的`selectionStart`和`selectionEnd`属性来实现的。但对于不支持这些属性的老版本...

    光标定位方法

    对于IE浏览器，可以使用`createTextRange()`方法创建一个范围对象，并通过一系列方法来移动光标到指定位置： ```javascript function setCaretPosition(ctrl, pos) { if (ctrl.setSelectionRange) { ctrl.focus()...

    JavaScript.txt

    - **解释**：当页面失去焦点时，通过调用`this.focus()`方法使页面重新获得焦点。 ### 16. 图片链接去边框 - **代码示例**： ```html ()"&gt; ``` - **解释**：这段代码定义了一个带有图片的链接，通过设置`...

    javascript设置文本框光标的方法实例小结

    在本文中，我们将深入探讨如何使用JavaScript实现这些功能。 首先，让我们了解如何获取文本框的光标位置。对于`&lt;input type="text"&gt;`，我们可以使用以下函数`getCaret(textbox)`： ```javascript function ...

    JavaScript 获取/设置光标位置,兼容InputTextArea

    这里，我们首先尝试使用`setSelectionRange`方法（非IE），然后是`createTextRange`（IE）。 #### 对于`TextArea`元素： 设置`TextArea`的光标位置同样简单： ```javascript function setTextAreaCursorPos...

    文本域定位光标并添加数据

    在JavaScript中，我们可以使用`document.getElementById('yourTextField').focus()`来将焦点移动到特定的文本域，然后通过`setSelectionRange()`或`createTextRange()`方法设置光标的起始和结束位置。 例如，如果你...

    javaScript让文本框内的最后一个文字的后面获得焦点实现代码

    代码示例中提供了两种方法，一种是直接调用focus方法让文本框获得焦点，另一种是使用setFocus函数，通过DOM操作让光标位于文本框中最后一个字符之后。setFocus函数使用了createTextRange方法创建一个文本范围，然后...

    js 获取光标在文本框中的位置

    类似地，我们可以使用`element.setSelectionRange(start, end)`或`createTextRange`方法来设置光标位置。这在动态处理文本输入或实现自定义编辑器时非常有用。 7. **应用场景**： 获取光标位置常用于实时输入验证...

    JavaScript 获取/设置光标位置,兼容Input&amp;&amp;TextArea

    在设置光标位置时，主要使用的方法是`selectionStart`和`selectionEnd`属性（在现代浏览器中），以及使用`document.selection.createTextRange`方法配合`move`和`moveStart`方法（在IE浏览器中）。设置光标位置的...

    JS常用方法

    - 此方法不是 JavaScript 的标准方法，需要自行定义或引入相关库才能使用。 - 替换时需注意正则表达式的特殊字符转义问题。 #### 二、SaveCode 方法（另存为文件） **定义与功能：** `SaveCode` 方法用于将指定...

    IF、FF兼容，TextBox获得焦点后，光标停在最后

    在网页开发中，不同浏览器对于某些功能的实现可能存在差异，例如JavaScript中的文本框（TextBox）光标定位。"IF"通常指的是Internet Explorer（IE），而"FF"则是Firefox。当用户点击TextBox时，我们希望光标自动移动...

    网站开发制作40个技巧

    13. **光标默认定位**：如果希望在文本框中自动让光标定位在文字的最后，可以使用JavaScript的`focus()`和`setSelectionRange`或`createTextRange`方法。 以上这些技巧都是网站开发者在日常工作中可以利用的实用...

    js移动焦点到最后位置的简单方法

    在Internet Explorer中，我们可以使用`createTextRange`和`select`方法来实现。首先，通过`getElementById`获取到目标元素，然后创建一个TextRange对象，使用`moveStart`将范围移动到元素的末尾，接着调用`collapse...

    将光标定位到textarea的某一行的javascript代码

    这个示例中的JavaScript代码适用于基于IE的浏览器，因为它使用了`createTextRange()`方法，这是一个IE特有的API。对于其他非IE浏览器，如Firefox、Chrome等，可以使用`setSelectionRange()`或`selectionStart`和`...

Magicbox
Global site tag (gtag.js) - Google Analytics