JAVAScript中,有一个textarea中比如输入AAA;BBB;CCC;DDD;当鼠标移动到这个字符上时; 比如鼠标现在在AAA;在AAA;上时,鼠标指针本来是那种像大写 I 这种的要输入的指针,但是现在要判断这个字符串是否有分号结尾,如有的话,那么鼠标点击到这个字符串时,变为那个全选的图标,应该是默认。求解。JavaScript鼠标指针 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 判断textarea的内容,修改指针样式不行吗 比如鼠标点到AAA;时,这个AAA后面有个分号,就是点一下就把这个AAA;选中,也就是鼠标移动到这个上面的时候就要做判断鼠标本来默认的I就要变成默认的那个鼠标。点击选中这个。 比如说就这个textarea,中有这些字符,比如鼠标点到AAA;时,本来鼠标指针默认的就是这个要输入的这个I,但是这个AAA后面有个分号,就是点一下就把这个AAA;鼠标变成默认的那个箭头,然后点击这个AAA;中不管那个字母都要选中整个AAA;。 你用 listView控件吧,这个控件我想应该有你要的功能 看错了,我以为是C#区,对不起,你是说模仿邮件发送那样可以被选中对吧?他们那个textarea 是这样的,在点击别的地方的按钮的时候,它会加一个<span>进去的,其实选中的是<span>而不是文字。 当你输入";"分号的时候,他也会在;号输入完以后自动增加一个<span>进去的。。 周五了,下午了,代码完成的差不多了,看到楼主的 这个问题,就来试下百分百原创,先看图:然后代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body> <textarea rows="6" id="txtBox" cols="60" onclick="ShowFos()">AAAAAAAAAAAAAA;BBBBBBBBBBBBBBBBBBBBBBBBBBBB;CCCCCCCCCCCCCCCCCCCCCCCCCCC;DDDDDDDDDDDDDDDDDDDDDDDDDD; </textarea> <script type="text/javascript"> function ShowFos() { var obj = document.getElementById("txtBox"); var val = document.getElementById("txtBox").value; var a = ""; var t1 = val.substr(obj.selectionStart, 1); var t2 = val.substr(obj.selectionStart - 1, 1); if (t1 == ";" || t2 == ";") { obj.style.cursor = "pointer"; var s1 = val.substring(0, obj.selectionStart - 1); var s2 = val.substring(0, obj.selectionStart + 1); var str = val.substring(s1.lastIndexOf(";"), s2.lastIndexOf(";")); obj.selectionStart = s1.lastIndexOf(";")+1; obj.selectionEnd = s2.lastIndexOf(";"); //obj.style.cursor = ""; } else { obj.style.cursor = ""; } } </script></body></html>随手敲的,所以没有用JQ,也没有注意命名规范什么的。最新版360浏览器(chrom核情况下)、火狐 测试都OK, IE6不OK, 没有测试IE7--IE10 整个小案例是这样的,比如一个页面,上面是一个textarea,正对着下面有一个div,div中有:AAABBBCCC 等 字段不知道是A标签还是span点击AAA就会增加到上面的textarea中以AAA;BBB;这样的格式出现,重复后要提醒。我现在只是做这个其中的一个小东西,就是这个点击全选的问题。这样说,大家都明白了把 看着类似英语单词分割的案例,http://download.csdn.net/detail/ajccom/4483581 可以下载下来看看,不要分 我10楼和11楼不是已经给你写明了吗,10楼是我看错题写成点击分号才选中,11楼告诉你根据我10楼的代码稍微改下就行,算了,我还是给你改好贴出来吧:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body> <textarea rows="6" id="txtBox" cols="60" onclick="ShowFos()">AAAAAAAAAAAAAA;BBBBBBBBBBBBBBBBBBBBBBBBBBBB;CCCCCCCCCCCCCCCCCCCCCCCCCCC;DDDDDDDDDDDDDDDDDDDDDDDDDD;来个没有分号的看看 </textarea> <script type="text/javascript"> function ShowFos() { var obj = document.getElementById("txtBox"); var val = document.getElementById("txtBox").value; var s1 = val.substring(0, obj.selectionStart); var i = obj.selectionStart; var s2 = val.substring(obj.selectionStart, val.lastIndexOf(";")+1); if (val.lastIndexOf(";") < obj.selectionStart) return; obj.selectionStart = s1.lastIndexOf(";")+1; obj.selectionEnd = s2.indexOf(";")+i; } </script></body></html>包括你0楼提出的条件:【没有分号的不选中】 也实现了,不要此条件的话只需要把相应的判断去掉即可。 <textarea rows="6" id="txtBox" cols="60" onclick ="ShowFos()">AAAAAAAAAAAAAA;BBBBBBBBBBBBBBBBBBBBBBBBBBBB;CCCCCCCCCCCCCCCCCCCCCCCCCCC;DDDDDDDDDDDDDDDDDDDDDDDDDD; </textarea> <script type="text/javascript"> function ShowFos() { var obj = document.getElementById("txtBox"); var val = document.getElementById("txtBox").value; var t1 = val.substr(0, obj.selectionStart); var t2 = val.substr(obj.selectionStart, val.length); var start = t1.length - t1.lastIndexOf(";"); var end = t2.indexOf(";"); if (end > 0) { obj.style.cursor = "pointer"; if (obj.setSelectionRange) { obj.setSelectionRange(t1.length - start, t1.length + end); } else { var range = obj.createTextRange(); range.collapse(true); range.moveStart('character', parseInt(t1.length - start)); range.moveEnd('character', parseInt(t1.length + end)); range.select(); } } else { obj.style.cursor = "inherit"; } } </script> 我刚刚看了,你这个不支持IE8,我只做IE8的,不好意思,怪我没说。你这个支持火狐,这个,我会做,就是那个 AAA; BBBB;CCCDD 鼠标移到AAA;时鼠标时是箭头的形状,因为AAA后面有分号;,移到CCC的时候是I光标的形状,因为后面没分号。 AAA;这个移上去的时候鼠标由I就变成了箭头,点击AAA;中不管哪个字母都是全部选中AAA;,CCC没有分号,鼠标上去还是I 15L bug好多。而且都写在了点击事件了。鼠标点击才会变。只支持火狐,我是IE8 按照你这样的要求,单纯一个textarea不可能实现,相当于开发一个所见即所得的编辑器,和我们平时用的网站编辑器一个道理,只是不用那么复杂,只做分号判断,有分号的部分变成一个块,鼠标移上去变形状,没有分号的是另外一种快鼠标移上去变成l形状,双击或单击时可以修改块。 那就不是在这一句两句能写出来的了, 也不是问能问出来的,因为没有什么技术难题,全得靠你自己去组织,慢慢研究吧,这个问是问不出来,因为全是组织页面、样式控制、JS改变内容等等需要你亲自动手的东西,只能回答你思路,一般的编辑器思路 :给定textarea的id,隐藏此textarea,在textarea位置处显示一个iframe,输入值,改变iframe的内容。。如果这点思路太简单了,那你要花1---3天专门去学习一个web编辑器,很多开源的,你选一个去学下。 <textarea rows="6" id="txtBox" cols="60" onclick ="ShowFos()">AAAAAAAAAAAAAA;BBBBBBBBBBBBBBBBBBBBBBBBBBBB;CCCCCCCCCCCCCCCCCCCCCCCCCCC;DDDDDDDDDDDDDDDDDDDDDDDDDD; </textarea> <script type="text/javascript"> function ShowFos() { var obj = document.getElementById("txtBox"); var val = document.getElementById("txtBox").value; var t1 = val.substr(0, getCursorPosition(obj).start); var t2 = val.substr(getCursorPosition(obj).start, val.length); var start = t1.length - (t1.length - t1.lastIndexOf(";")); end = t1.length + t2.indexOf(";"); if (end > 0) { obj.style.cursor = "pointer"; if (obj.setSelectionRange) { obj.setSelectionRange(start,end); } else { var range = obj.createTextRange(); range.collapse(true); range.moveStart('character', start); range.moveEnd('character', end-start); range.select(); } } else { obj.style.cursor = "inherit"; } } function getCursorPosition(textarea) { var rangeData = { text: "", start: 0, end: 0 }; textarea.focus(); if (textarea.setSelectionRange) { // W3C rangeData.start = textarea.selectionStart; rangeData.end = textarea.selectionEnd; rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end) : ""; } else if (document.selection) { // IE var i, oS = document.selection.createRange(), // Don't: oR = textarea.createTextRange() oR = document.body.createTextRange(); oR.moveToElementText(textarea); rangeData.text = oS.text; rangeData.book = oS.getBook(); // object.moveStart(sUnit [, iCount]) // Return Value: Integer that returns the number of units moved. for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i++) { // Why? You can alert(textarea.value.length) if (textarea.value.charAt(i) == '\n') { i++; } } rangeData.start = i; rangeData.end = rangeData.text.length + rangeData.start; } return rangeData; } </script> 咱们的回答都只能实现在焦点在textarea内(鼠标点击、keyup等等,总之就是要焦点)的选中。而楼主要的 说白了 ,楼主要的效果就是QQ邮箱里面发送邮件填写多个收件人的那种效果,也就是我18楼回答的, 那相当于一个所见即所得的编辑器 鼠标放上去的应该没办法实现,只能点击,textarea不具备MOUSEMOVE得到值 不是没办法实现 ,是单纯一个textarea不可能实现实现的话就相当于开发了一个所见即所得的编辑器,楼主要想实现那样的效果,就得去看别人开源的编辑器,然后自己开发个再继续在这里问毫无意义,咱们只能提供思路,不可能花几天时间写个楼主需要的编辑器出来然后把代码发给楼主,那就不是回答问题的范畴了。一般也没人愿意花N天时间去学习所见即所得的编辑器的开发,然后开发个这么特定需求的编辑器出来。 好吧,那个我觉得也不行。我做的方法都是截取, 你们那个IE8怎么做。问了下老大,说点一下变换也行。还是往下做把。点击div 变成加到上面的textarea function getStr() { var txt = document.getElementById("txtInput").value; var obj = document.getElementById("txtInput"); var intxt = txt.indexOf(";", getCursorPosition(test)); if (intxt >= 1) { var txt2 = txt.substring((txt.lastIndexOf(";", (txt.indexOf(";"), getCursorPosition(test)))) + 1, (txt.indexOf(";", getCursorPosition(test)))); var rng = txtInput.createTextRange(); rng.findText(txt2); obj.style.cursor = "default"; rng.select(); } else { obj.style.cursor = ""; } }--getCursorPosition(test) 这个是光标位置。是一个方法,也有不少代码。感觉我写的好笨。你们写的好简单 js中textarea怎么获取div中的数据 <div>AAA</div> <div>BBB</div> <div>CCC</div>点击div添加到textarea中。变成AAA;BBB;CCC; 如何用Javascript添加DOCTYPE? 请问javascript有没有string.IsNullOrEmpty 一个关于定时刷新的问题! 一个按钮提交的问题? 多个输入框传递值的问题 关于给checkbox加上点击事件 js 如何动态控制tr td的可见和隐藏 请问 网银输入密码时 显示器屏幕变半透明黑色 是怎么做到的? 求:js随机生成0-51之间30个不同的数字 如何用代码实现网页中的图片保存到磁盘? JQ操作JSON求教 jquery 为啥赋值错误
比如说就这个textarea,中有这些字符,
比如鼠标点到AAA;时,本来鼠标指针默认的就是这个要输入的这个I,但是这个AAA后面有个分号,就是点一下就把这个AAA;鼠标变成默认的那个箭头,然后点击这个AAA;中不管那个字母都要选中整个AAA;。
他们那个textarea 是这样的,在点击别的地方的按钮的时候,它会加一个<span>进去的,其实选中的是<span>而不是文字。 当你输入";"分号的时候,他也会在;号输入完以后自动增加一个<span>进去的。。
周五了,下午了,代码完成的差不多了,看到楼主的 这个问题,就来试下
百分百原创,先看图:然后代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<textarea rows="6" id="txtBox" cols="60" onclick="ShowFos()">
AAAAAAAAAAAAAA;BBBBBBBBBBBBBBBBBBBBBBBBBBBB;CCCCCCCCCCCCCCCCCCCCCCCCCCC;DDDDDDDDDDDDDDDDDDDDDDDDDD;
</textarea>
<script type="text/javascript">
function ShowFos() {
var obj = document.getElementById("txtBox");
var val = document.getElementById("txtBox").value;
var a = "";
var t1 = val.substr(obj.selectionStart, 1);
var t2 = val.substr(obj.selectionStart - 1, 1); if (t1 == ";" || t2 == ";") {
obj.style.cursor = "pointer";
var s1 = val.substring(0, obj.selectionStart - 1);
var s2 = val.substring(0, obj.selectionStart + 1);
var str = val.substring(s1.lastIndexOf(";"), s2.lastIndexOf(";"));
obj.selectionStart = s1.lastIndexOf(";")+1;
obj.selectionEnd = s2.lastIndexOf(";");
//obj.style.cursor = ""; }
else {
obj.style.cursor = "";
}
}
</script>
</body>
</html>
随手敲的,所以没有用JQ,也没有注意命名规范什么的。最新版360浏览器(chrom核情况下)、火狐 测试都OK, IE6不OK, 没有测试IE7--IE10
AAA
BBB
CCC 等 字段不知道是A标签还是span
点击AAA就会增加到上面的textarea中以AAA;BBB;这样的格式出现,重复后要提醒。
我现在只是做这个其中的一个小东西,就是这个点击全选的问题。
这样说,大家都明白了把
我10楼和11楼不是已经给你写明了吗,10楼是我看错题写成点击分号才选中,11楼告诉你根据我10楼的代码稍微改下就行,
算了,我还是给你改好贴出来吧:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<textarea rows="6" id="txtBox" cols="60" onclick="ShowFos()">
AAAAAAAAAAAAAA;BBBBBBBBBBBBBBBBBBBBBBBBBBBB;CCCCCCCCCCCCCCCCCCCCCCCCCCC;DDDDDDDDDDDDDDDDDDDDDDDDDD;来个没有分号的看看
</textarea>
<script type="text/javascript">
function ShowFos()
{
var obj = document.getElementById("txtBox");
var val = document.getElementById("txtBox").value;
var s1 = val.substring(0, obj.selectionStart);
var i = obj.selectionStart;
var s2 = val.substring(obj.selectionStart, val.lastIndexOf(";")+1);
if (val.lastIndexOf(";") < obj.selectionStart)
return;
obj.selectionStart = s1.lastIndexOf(";")+1;
obj.selectionEnd = s2.indexOf(";")+i;
}
</script>
</body>
</html>
包括你0楼提出的条件:【没有分号的不选中】 也实现了,
不要此条件的话只需要把相应的判断去掉即可。
AAAAAAAAAAAAAA;BBBBBBBBBBBBBBBBBBBBBBBBBBBB;CCCCCCCCCCCCCCCCCCCCCCCCCCC;DDDDDDDDDDDDDDDDDDDDDDDDDD;
</textarea>
<script type="text/javascript">
function ShowFos() {
var obj = document.getElementById("txtBox");
var val = document.getElementById("txtBox").value;
var t1 = val.substr(0, obj.selectionStart);
var t2 = val.substr(obj.selectionStart, val.length);
var start = t1.length - t1.lastIndexOf(";");
var end = t2.indexOf(";");
if (end > 0) {
obj.style.cursor = "pointer";
if (obj.setSelectionRange) {
obj.setSelectionRange(t1.length - start, t1.length + end);
} else {
var range = obj.createTextRange();
range.collapse(true);
range.moveStart('character', parseInt(t1.length - start));
range.moveEnd('character', parseInt(t1.length + end));
range.select();
}
}
else {
obj.style.cursor = "inherit"; }
}
</script>
相当于开发一个所见即所得的编辑器,和我们平时用的网站编辑器一个道理,只是不用那么复杂,
只做分号判断,有分号的部分变成一个块,鼠标移上去变形状,没有分号的是另外一种快鼠标移上去变成l形状,双击或单击时可以修改块。 那就不是在这一句两句能写出来的了, 也不是问能问出来的,因为没有什么技术难题,全得靠你自己去组织,慢慢研究吧,这个问是问不出来,因为全是组织页面、样式控制、JS改变内容等等需要你亲自动手的东西,只能回答你思路,
一般的编辑器思路 :给定textarea的id,隐藏此textarea,在textarea位置处显示一个iframe,输入值,改变iframe的内容。。
如果这点思路太简单了,那你要花1---3天专门去学习一个web编辑器,很多开源的,你选一个去学下。
AAAAAAAAAAAAAA;BBBBBBBBBBBBBBBBBBBBBBBBBBBB;CCCCCCCCCCCCCCCCCCCCCCCCCCC;DDDDDDDDDDDDDDDDDDDDDDDDDD;
</textarea>
<script type="text/javascript">
function ShowFos() { var obj = document.getElementById("txtBox");
var val = document.getElementById("txtBox").value;
var t1 = val.substr(0, getCursorPosition(obj).start);
var t2 = val.substr(getCursorPosition(obj).start, val.length);
var start = t1.length - (t1.length - t1.lastIndexOf(";"));
end = t1.length + t2.indexOf(";");
if (end > 0) {
obj.style.cursor = "pointer";
if (obj.setSelectionRange) {
obj.setSelectionRange(start,end);
} else {
var range = obj.createTextRange();
range.collapse(true);
range.moveStart('character', start);
range.moveEnd('character', end-start);
range.select();
}
}
else {
obj.style.cursor = "inherit"; }
} function getCursorPosition(textarea) {
var rangeData = { text: "", start: 0, end: 0 };
textarea.focus();
if (textarea.setSelectionRange) { // W3C
rangeData.start = textarea.selectionStart;
rangeData.end = textarea.selectionEnd;
rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end) : "";
} else if (document.selection) { // IE
var i,
oS = document.selection.createRange(),
// Don't: oR = textarea.createTextRange()
oR = document.body.createTextRange();
oR.moveToElementText(textarea); rangeData.text = oS.text;
rangeData.book = oS.getBook(); // object.moveStart(sUnit [, iCount])
// Return Value: Integer that returns the number of units moved.
for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i++) {
// Why? You can alert(textarea.value.length)
if (textarea.value.charAt(i) == '\n') {
i++;
}
}
rangeData.start = i;
rangeData.end = rangeData.text.length + rangeData.start;
} return rangeData;
}
</script>
咱们的回答都只能实现在焦点在textarea内(鼠标点击、keyup等等,总之就是要焦点)的选中。而楼主要的 说白了 ,楼主要的效果就是QQ邮箱里面发送邮件填写多个收件人的那种效果,也就是我18楼回答的, 那相当于一个所见即所得的编辑器
不是没办法实现 ,是单纯一个textarea不可能实现实现的话就相当于开发了一个所见即所得的编辑器,楼主要想实现那样的效果,就得去看别人开源的编辑器,然后自己开发个再继续在这里问毫无意义,咱们只能提供思路,不可能花几天时间写个楼主需要的编辑器出来然后把代码发给楼主,那就不是回答问题的范畴了。一般也没人愿意花N天时间去学习所见即所得的编辑器的开发,然后开发个这么特定需求的编辑器出来。
var txt = document.getElementById("txtInput").value;
var obj = document.getElementById("txtInput");
var intxt = txt.indexOf(";", getCursorPosition(test));
if (intxt >= 1) {
var txt2 = txt.substring((txt.lastIndexOf(";", (txt.indexOf(";"), getCursorPosition(test)))) + 1, (txt.indexOf(";", getCursorPosition(test))));
var rng = txtInput.createTextRange();
rng.findText(txt2);
obj.style.cursor = "default";
rng.select();
} else {
obj.style.cursor = "";
}
}
--getCursorPosition(test) 这个是光标位置。是一个方法,也有不少代码。
感觉我写的好笨。
你们写的好简单
<div>AAA</div>
<div>BBB</div>
<div>CCC</div>
点击div添加到textarea中。
变成AAA;BBB;CCC;