<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>光标位置</title>
<style>
INPUT{border: 1 solid #000000}
BODY,TABLE{font-size: 10pt}
</style>
</head>
<body>
<table border="0" width="700" cellspacing="0" cellpadding="0">
<tr>
<td width="479" rowspan="7">
点击 TextArea 实现光标定位
<p>
<textarea rows="7" cols="49" id="box" onclick=tellPoint()>我怕来不及我要抱着你,直到感觉你的绉纹有了岁月的痕迹,直到视线变得模糊直到不能呼吸
为了你我愿意
动也不能动也要看着你,直到感觉你的发线有了白雪的痕迹,直到肯定你是真的直到失去力气让我们形影不离
如果全世界我也可以放弃,至少还有你值得我去珍惜而你在这里就是生命的奇迹
也许全世界我也可以忘记,就是不愿意失去你的消息你掌心的痣我总记得在哪里
我们好不容易我们身不由已,我怕时间太快不够将你看仔细,我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离
</textarea>
<script>
function movePoint()
{
var pn = parseInt(pnum.value);
if(isNaN(pn))
return;
var rng = box.createTextRange();
rng.moveStart("character",pn);
rng.collapse(true);
rng.select();
returnCase(rng)
}
function tellPoint()
{
var rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x,event.y);
rng.moveStart("character",-event.srcElement.value.length)
pnum.value = rng.text.length
returnCase(rng)
}
function returnCase(rng)
{
bh.innerText = rng.boundingHeight;
bl.innerText = rng.boundingLeft;
bt.innerText = rng.boundingTop;
bw.innerText = rng.boundingWidth;
ot.innerText = rng.offsetTop;
ol.innerText = rng.offsetLeft;
t.innerText = rng.text;
}
function selectText(sp,ep)
{
sp = parseInt(sp)
ep = parseInt(ep)
if(isNaN(sp)||isNaN(ep))
return;
var rng = box.createTextRange();
rng.moveEnd("character",-box.value.length)
rng.moveStart("character",-box.value.length)
rng.collapse(true);
rng.moveEnd("character",ep)
rng.moveStart("character",sp)
rng.select();
returnCase(rng);
}
var rg = box.createTextRange();
function findText(tw)
{
if(tw=="")
return;
var sw = 0;
if(document.selection)
{
sw = document.selection.createRange().text.length;
}
rg.moveEnd("character",box.value.length);
rg.moveStart("character",sw);
if(rg.findText(tw))
{
rg.select();
returnCase(rg);
}
if(rg.text!=tw)
{
alert("已经搜索完了")
rg = box.createTextRange()
}
}
</script>
</p>
<p></p>
光标位置:<input type="text" value="0" id="pnum" size="8"> <input type="button" onclick="movePoint()" value="移动光标到指定位置">
<p></p>
选择指定范围:<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择">
<p></p>
选择查找字符 :<input type="text" value="" id="cbox" size="8"> <input type="button" onclick="findText(cbox.value)" value="查找下一个并选择">
</td>
<td width="217">boundingHeight: <span id="bh"></span></td>
</tr>
<tr>
<td width="217">boundingWidth: <span id="bw"></span></td>
</tr>
<tr>
<td width="217">boundingTop: <span id="bt"></span></td>
</tr>
<tr>
<td width="217">boundingLeft: <span id="bl"></span></td>
</tr>
<tr>
<td width="217">offsetLeft: <span id="ol"></span> </td>
</tr>
<tr>
<td width="217">offsetTop: <span id="ot"></span> </td>
</tr>
<tr>
<td width="217">text: <span style="position: absolute; z-index: 10" id="t"></span> </td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
NULL 博文链接:https://heisetoufa.iteye.com/blog/401066
点击文本框,光标定位到首位置,Javascript实现的,效果不错。
用JS实现将光标定位于输入框最右侧。 场景一:编辑图片的描述文字 场景二:Script.aculo.us的Ajax.InPlaceEditor类。双击可编辑,编辑后离开可自动更新该区域。 以上场景都需要JS实现将光标定位于输入框最右侧,却...
<textarea name=”ta1″ rows=5 cols=50> aaaaaaaaaaaaaa cccccccccc dddddddddddd fffffffffffff </textarea> <input value=”1″ name=”line”> <input type=button onclick=...
输入密码时显示密码及光标定位到末尾.用JS实现的,自己看看吧
光标定位,想必大家有所了解吧,在本文将为大家介绍的是通过自定义函数来实现标签元素的定位,感兴趣的朋友可以了解下
主要介绍了JavaScript实现点击文本自动定位到下拉框选中操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
JS在TextArea光标位置插入文字+移动光标到文字末尾,Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性,具体实现如下,感兴趣的朋友可以参考下哈
主要是实现textarea中光标的定位方法,考虑到多浏览器的兼容性,需要的朋友可以参考下。
主要介绍了js实现获取焦点后光标在字符串后,原理就是获得焦点后重新把自己复制粘帖一下,喜欢的朋友可以看看
本文实例讲述了Javascript实现获取及设置光标位置的方法。分享给大家供大家参考。具体如下: 在项目开发中经常遇到input等设置光标位置到最后的问题,今天我查了一下Google,找到了在IE、Firefox、Opera等主流浏览器...
文本框使用 textarea 标签,通过 textarea 的光标事件获取鼠标光标定位的设置的朗读起点,具体参考 MDN 通过网页语音 API 实现朗读,具体参考 SpeechSynthesis JavaScript写的文本转语音,自动朗读工具...
那就是obj.focus()将焦点移动到输入框后,会将文字光标(就是一闪一闪的竖线)移动到这个输入框的第一个字符的位置…就上面的判断而言..如果文本框中没有内容..obj.focus正好可以满足我们直接在文本框中输入内容而不用...
正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点。但是这两个对象在IE和标准的DOM方式的运用方法是不同的。 思路:首先获得用户的选区(光标当前位置可理解成起始和终止位置一样的...
在京东商城网页版,无论你在什么位置,只需要按下S键,就可以将光标定位到搜索栏进行搜索。虽然说这是一个很不错的功能,但是貌似没有几个人知道。 程序实现很简单,在s键上升的时候搜索框获得焦点就可以了。 <!...
当opsStart和opsEnd相同时,可用于定位光标位置。 setSelectionRange实际上是改变了selectionStart 和 selectionEnd属性,所以也可以通过直接修改这两个属性来实现 方法二 input.selectionStart = opsStart; input...
给窗口添加标题栏,这里使用一个放在窗口顶部的层实现,同时将标题栏的鼠标光标设置为拖动(move)形状(在chrome中拖动的时候,光标会变成文字光标,松开鼠标键后恢复)。 代码如下: #win { position:absolute; wi
11.3 控制光标的属性 316 11.4 media query和响应式布局 317 11.5 本章小结 323 第12章 变形与动画相关属性 324 12.1 CSS 3提供的变形支持 325 12.2 CSS 3新增的3D变换 337 12.3 CSS 3提供的Transition动画 ...
实现思路 1、写好6位密码输入框的静态样式和html结构 2、将密码输入框input定位到父容器,覆盖之前写好的6位密码输入框区域,并设置为透明 3、虽然设置了密码输入框为透明,但当密码输入框获得焦点的时候,输入框的...
文本框使用 textarea 标签,通过 textarea 的光标事件获取鼠标光标定位的设置的朗读起点,具体参考 MDN 通过网页语音 API 实现朗读,具体参考 SpeechSynthesis 默认从头开始朗读,光标点到想要开始的位置,点击设置...