社区
JavaScript
帖子详情
如何在textarea忠定位光标的位置?
SadEmprie
2003-08-18 03:35:42
不知道这个功能利用js可以实现么?
...全文
194
7
打赏
收藏
如何在textarea忠定位光标的位置?
不知道这个功能利用js可以实现么?
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
7 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
SadEmprie
2003-08-19
打赏
举报
回复
非常感谢!!
结
awaysrain
2003-08-19
打赏
举报
回复
获取光标位置系列8(flashsoft)
================================
<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>
=================================
今天又看到一种
=========================================
<textarea id=demo cols=50>
中文abcdefghijklmnopqrstuvwxyz</textarea>
<br><input type=button value=getPos onclick=getPos(demo)>
<script>
function getPos(obj){
obj.focus();
var workRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse(false);
workRange.select();
alert(len);
}
</script>
====================================
awaysrain
2003-08-19
打赏
举报
回复
取得当前坐标系列2(色眯眯的小疯狗)
===============================
<textarea rows=10 cols=100 onclick="getCursorPosition()">
北京时间10月6日,世界三大通讯社之一的法新社刊发图文报道,中国国脚孙继海因为在最近的世界杯预选赛中的表现,已经吸引了意大利俱乐部AC米兰和都灵队的争购。中国队只需在10月7日同阿曼队的比赛中战平就将首次进入世界杯决赛圈。图为孙继海(右)1998年12月19日在亚洲杯上的资料图片。</textarea>
<script language=JScript>
function getCursorPosition(){
var src = event.srcElement
var oTR = src.createTextRange()
var textLength = src.innerText.length
var line, char, total, cl
oTR.moveToPoint(window.event.x, window.event.y)
oTR.moveStart("character", -1*textLength)
cl = oTR.getClientRects()
line = cl.length
total = oTR.text.length
oTR.moveToPoint(cl[cl.length-1].left-2, cl[cl.length-1].top-2)
oTR.moveStart("character", -1*textLength)
char = total - oTR.text.length
window.status = "行: " + line +", 列: " + char + ", 第 " + total + " 个字符"
}
</SCRIPT>
=================================
取得当前坐标系列3(Yang)
================================
<textarea rows=20 cols=80 id=show>
Alpha 滤镜 : 线形 <img src=images/ad.gif style='filter: Alpha(opacity=100,finishopacity=0,style=1,startx=0,starty=0,finishx=468,finishy=60)'><br>
Alpha 滤镜 :放射状<img src=images/ad.gif style='filter: Alpha(opacity=100,finishopacity=0,style=2,startx=0,starty=0,finishx=468,finishy=60)'><br>
Alpha 滤镜 :长方形<img src=images/ad.gif style='filter: Alpha(opacity=100,finishopacity=0,style=3,startx=0,starty=0,finishx=468,finishy=60)'><br>
<img src=images/ad.gif style='filter:blur(add=ture,direction=135,strength=100)'><br>
<img src=images/ad.gif style='filter:filph'><br>
<img src=images/ad.gif style='filter:filpv'><br>
<img src=images/ad.gif style='filter:chroma(color=white)'><br>
<p style='filter:Dropshadow(color=#ff0080,offx=5,offy=5.positive=0)'>样式表滤镜实例</p><br>
<img src=images/ad.gif style='filter:glow(color=blue,strength=10)'><br>
<img src=images/ad.gif style='filter:gray'><br>
<img src=images/ad.gif style='filter:invert'><br>
<img src=images/ad.gif style='filter:xray'><br>
<img src=images/ad.gif style='filter:light'><br>
<img src=images/ad.gif style='filter:mask(color=white)'><br>
<img src=images/ad.gif style='filter:shadow(color=red,direction=225)'><br>
<img src=images/ad.gif style='filter:wave(add=add,freq=2,lightstrength=50,phase=45,strength=10)'><br>
<img src=images/ad.gif style='filter:wave(add=add,freq=2,lightstrength=30,phase=50,strength=5)'><br>
<img src=images/ad.gif style='filter:wave(add=add,freq=2,lightstrength=90,phase=25,strength=5)'><br>
<img src=images/ad.gif style=''><br>
</textarea>
<input type=button value=运行代码 onclick=window.open().document.writeln(show.value)>
<input type=button value=取得当前坐标 onclick='window.status=GetCursorPos(show)'>
<script>
function GetCursorPos(oTextArea)
{
s="~!@#$%^";
clipboardData.setData('text',s);
oTextArea.focus();
document.execCommand('paste');
var ret=oTextArea.value.indexOf(s);
document.execCommand('undo');
return ret;
}
</script>
=================================
取得当前坐标系列4(qiushuiwuhen)
====================================
<textarea id=demo cols=50>
中文abcdefghijklmnopqrstuvwxyz
</textarea>
<br><input type=button onclick=get(demo) value=get>
<script>
function get(oTextarea){
var qswh="@#%#^&#*$"
oTextarea.focus();
rng=document.selection.createRange();
rng.text=qswh;
var tmp=oTextarea.value.indexOf(qswh)
rng.moveStart("character", -qswh.length)
rng.text="";
alert(tmp);
}
</script>
=========================================
取得当前坐标系列5(色眯眯的小疯狗)
===========================================
<textarea rows=10 cols=100 onclick="getCursorPosition()" onkeyup="getCursorPosition()">
北京时间10月6日,世界三大通讯社之一的法新社刊发图文报道,中国国脚孙继海因为在最近的世界杯预选赛中的表现,已经吸引了意大利俱乐部AC米兰和都灵队的争购。中国队只需在10月7日同阿曼队的比赛中战平就将首次进入世界杯决赛圈。图为孙继海(右)1998年12月19日在亚洲杯上的资料图片。</textarea>
<script language=JScript>
function getCursorPosition(){
var src = event.srcElement
var oTR = src.createTextRange()
var oSel = document.selection.createRange()
var textLength = src.innerText.length
var line, char, total, cl
oTR.moveToPoint(oSel.offsetLeft, oSel.offsetTop)
oTR.moveStart("character", -1*textLength)
cl = oTR.getClientRects()
line = cl.length
total = oTR.text.length
oTR.moveToPoint(cl[cl.length-1].left, cl[cl.length-1].top)
oTR.moveStart("character", -1*textLength)
char = total - oTR.text.length
if (oSel.offsetTop != cl[cl.length-1].top) {line++; char = 0}
else if (src.createTextRange().text.substr(oTR.text.length, 2) == "\r\n") char -= 2
window.status = "行: " + line +", 列: " + char + ", 第 " + total + " 个字符"
}
</SCRIPT>
=========================================
取得当前坐标系列6(qiushuiwuhen)
============================
<textarea id=demo cols=50>
中文abcdefghijklmnopqrstuvwxyz</textarea>
<br><input type=button value=getPos onclick=getPos(demo)>
<script>
function getPos(obj){
obj.focus();ml=obj.value.length;l=0;
rng=document.selection.createRange();
rng.moveEnd("character",ml);
try{l=ml-rng.htmlText.match(/>((.|\n)+)<\/textarea>/i)[1].length}catch(e){}
alert(l)
}
</script>
==============================
获取光标位置系列7(flashsoft)
==================================
<body><div id=box>点击textarea</div>
<script>
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)
}
</script><textarea onclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf</textarea></body>
========================================
awaysrain
2003-08-19
打赏
举报
回复
太长了,贴不完啊
主题: 光标的帖子总结(Range的使用)
发表人
qiushuiwuhen
秋水无恨
积分:7253
发贴:2599
来自:
注册:2001-12-29
先说说TextRange 的常用方法
collapse([bStart])
移动Range的插入点
bStart true(移到开头) false(移到末尾)
findText(sText [, iSearchScope] [, iFlags])
在Range中查找sText
iSearchScope 开始位置,负数方向搜索
iFlags 2(整词匹配) 4(区别大小写)
moveStart(sUnit [, iCount])
moveEnd(sUnit [, iCount])
移动Range的开头或结尾
sUnit character(字) word(词) sentence(句) textedit(Range)
iCount 移动数量,默认为1
moveToPoint(iX, iY)
移动光标到坐标(iX,iY)
pasteHTML(sHTMLText)
替换Range中的html
scrollIntoView([bAlignToTop])
滚动使之在当前窗口显示
bAlignToTop true(Range在窗口开头) false(Range在窗口底部)
select()
选中Range
然后讲一些例子,大家也可以帮忙汇总一下,找帖子不好找,呵呵
设置光标(qiushuiwuhen)
====================================
<textarea id=demo cols=50 rows=5>关于光标定位的补充.abcdefghijklmnopqrstuvwxyz</textarea>
<br><input type=checkbox id=collapse>倒数 第<input id=s value=4 size=4>位 <input value="设置光标" type=button onclick=setCursor()>
<script>
function setCursor(){
var num=parseInt(document.all.s.value)
range=document.all.demo.createTextRange();
if(document.all.collapse.checked){
range.collapse(false);
range.moveEnd('character',-1*num);
}else{
range.collapse(true);
range.moveStart('character',-1+num);
}
range.select();
}
</script>
=====================================
设置文本选择(qiushuiwuhen)
==========================================
<div id=demo>关于光标定位的补充.abcdefghijklmnopqrstuvwxyz</div>
<br>从正数<input id=b value=4 size=4> 到 倒数第<input id=s value=4 size=4>位 <input value="设置文本选择" type=button onclick=setSelect()>
<script>
function setSelect(){var range = document.body.createTextRange();
range.moveToElementText(demo)
range.moveEnd('character',-1*parseInt(document.all.s.value));
range.moveStart('character',-1+parseInt(document.all.b.value));
range.select();
}
</script>
================================================================
取得当前坐标系列1(qiushuiwuhen)
=====================================
<textarea id=show rows=10 cols=100>
先将光标置在这里任意处,然后点击按钮,看光标变化
</textarea>
<br><input type=button value=取得当前坐标 onclick='window.status=GetCursorPos()'>
<script>
function GetCursorPos(oTextArea)
{
s="~!@#$%^";
clipboardData.setData('text',s);
show.focus();
document.execCommand('paste');
var arr=show.value.split(s);
show.value=arr[1];
show.document.selection.empty();
show.document.selection.createRange().select();
show.focus();
clipboardData.setData('text',arr[0]);
document.execCommand('paste');
return arr[0].length;
}
</script>
========================================
awaysrain
2003-08-18
打赏
举报
回复
我这里可以啊,刚试过的
SadEmprie
2003-08-18
打赏
举报
回复
这个地址我打不开啊
awaysrain
2003-08-18
打赏
举报
回复
http://www.blueidea.com/bbs/NewsDetail.asp?id=603197
TextArea
中
定位
光标
位置
在项目中,遇到一个场景:希望能在
TextArea
中输入某条记录中的明细(明细较简单,没有附属信息,只用记录顺序和值即可,譬如用“+”号来作为明细分隔符:1+1.5+2+3.4),如下图所示: 为了让输入更直观,需要在输入过程中,实时地显示汇总数量和合计;如果用户希望编辑文本中间的某条明细,也可以通过鼠标点击、或者键盘上的上下左右键来
定位
某个明细,并在页面上提示
光标
的焦点
位置
。 ...
定位
Html页面中
Textarea
元素的
光标
在屏幕中的绝对
位置
在做HTML界面的时候,会想做出这样一个功能:当用户在
textarea
里面输入字符的时候,根据他输入的文字,在
光标
所在屏幕
位置
弹出一个框,并显示一些东西。这个过程中,最难的无非一点: 如何
定位
textarea
光标
在屏幕中的
位置
。 在此整理网上搜罗到的资源,确定了一个办法,其流程大概如下: 创建一个普通的
TextArea
框,然后在
TextArea
外层套一个 DIV ( 暂时命名为 div_parent ,div_parent的 Position 设为 relative , 到时候会根
textarea
获取
光标
位置
和设置
光标
位置
获取
光标
位置
//ctrl 是dom节点 function getCursortPosition (ctrl) { //获取
光标
位置
函数 var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus (); // 获取焦点 var Sel =...
关于各浏览器下
textarea
中
光标
位置
的获取问题详解
申明一下,我这里只是讲的
textarea
中的有关
光标
的几种方法,并不是针对整个document的,我相信把
textarea
中的
光标
方法弄清楚了的话,其他的就简单多了。 最近接触到一个新的东西,就是
textarea
中
光标
位置
的获取。先来说一说我是怎么接触到这个东西的,最近一直在写一个能够通用的评论插件,在这个评论插件中我们加入了表情插入这个功能,也就是技能文字评论,也能表情评论,目前这个插件的样子
Javascript设置和获取
Textarea
的
光标
位置
的方法(亲测有用),可
定位
光标
到某个
位置
原文网址:http://www.iteye.com/topic/716748 效果如图: 源码: JS设置及获取
Textarea
的
光标
位置
var isIE = !(!document.all); function posCursor(){ var start=0,end=0; var oTexta
JavaScript
87,907
社区成员
224,614
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章