jquery 按钮点击时文本输入发生变化
我在这个网站和其他网站上找到了几个线程来修复ie的selectionStart和selectionEnd，并决定实现此代码 网站。
在简单的 html 页面中，有多个具有公共类和唯一 id 的文本字段。有几个按钮可用作虚拟键盘。关注任何文本字段并单击按钮会将文本放置到光标位置的该元素中。如果选择了某些文本，那么在 mozilla 和 chrome 中也可以正常工作。但是其他浏览器有问题
歌剧 - 节奏文本很好，但在选择时而不是替换文本 添加到选择末尾（即，如果从右到左进行选择，则放置在左侧，反之亦然）。
ie8 - 行参数无效 `stored_range.moveToElementText(element );
整个代码如下所示
<!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" xml:lang="en" lang="en">
<head>
<title>selection test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='js/jquery-1.4.2.js'></script>
<script>
window.onload = function () {
jQuery('.iptext').live('focus', function(event) {
holdFocus=$(this);
holdFocus=holdFocus[0];//this is required
});
jQuery('.addchar').live('click', function(event) {
// Get focused textfield
if(holdFocus==null)
{
}
else
{
var element =holdFocus;
if( document.selection ){
// The current selection
var range = document.selection.createRange();
// We'll use this as a 'dummy'
var stored_range = range.duplicate();
// Select all text
stored_range.moveToElementText( element );
// Now move 'dummy' end point to end point of original range
stored_range.setEndPoint( 'EndToEnd', range );
// Now we can calculate start and end points
element.selectionStart = stored_range.text.length - range.text.length;
element.selectionEnd = element.selectionStart + range.text.length;
}
$(holdFocus).val(
$(holdFocus).val().substring(0, holdFocus.selectionStart)+
$.trim($(this).text())+
$(holdFocus).val().substring(holdFocus.selectionEnd)
);
}
});
};
</script>
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
ul {display:block;}
li { list-style: none;display:inline-block;width:20px;height:20px;background-color:#808000;}
ul li a {display:block;text-decoration:none; }
</style>
</head>
<body>
<input type="text" id="txt1" class="iptext" autocomplete="off" value="Testing String">
<input type="text" id="txt2" class="iptext" autocomplete="off" value="Testing String">
<ul>
<li><a href="#" class="addchar">a</a></li>
<li><a href="#" class="addchar">b </a></li>
<li><a href="#" class="addchar">c</a></li>
<li><a href="#" class="addchar">d </a></li>
</ul>
</body>
</html>
这是一个小提琴链接
I gone several thread in this site and others for working fix for selectionStart and selectionEnd for ie and decided to implement code from this site.
In simple html page there are multiple textfields with common class and unique id. There are several buttons which works as virtual key board. On focusing on any textfiled and clicking on button will place a text into that element at cursor position. If some text is selected that is also working fine in mozilla and chrome. But there is problem in other browsers
opera - pacing text is fine but on selection instead replacing text it
adds to selection end (i.e if selection is made from right to left then placing at left and vice versa).ie8 - invalid argument for line
`stored_range.moveToElementText(element );
whole code look like below
<!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" xml:lang="en" lang="en">
<head>
<title>selection test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='js/jquery-1.4.2.js'></script>
<script>
window.onload = function () {
jQuery('.iptext').live('focus', function(event) {
holdFocus=$(this);
holdFocus=holdFocus[0];//this is required
});
jQuery('.addchar').live('click', function(event) {
// Get focused textfield
if(holdFocus==null)
{
}
else
{
var element =holdFocus;
if( document.selection ){
// The current selection
var range = document.selection.createRange();
// We'll use this as a 'dummy'
var stored_range = range.duplicate();
// Select all text
stored_range.moveToElementText( element );
// Now move 'dummy' end point to end point of original range
stored_range.setEndPoint( 'EndToEnd', range );
// Now we can calculate start and end points
element.selectionStart = stored_range.text.length - range.text.length;
element.selectionEnd = element.selectionStart + range.text.length;
}
$(holdFocus).val(
$(holdFocus).val().substring(0, holdFocus.selectionStart)+
$.trim($(this).text())+
$(holdFocus).val().substring(holdFocus.selectionEnd)
);
}
});
};
</script>
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
ul {display:block;}
li { list-style: none;display:inline-block;width:20px;height:20px;background-color:#808000;}
ul li a {display:block;text-decoration:none; }
</style>
</head>
<body>
<input type="text" id="txt1" class="iptext" autocomplete="off" value="Testing String">
<input type="text" id="txt2" class="iptext" autocomplete="off" value="Testing String">
<ul>
<li><a href="#" class="addchar">a</a></li>
<li><a href="#" class="addchar">b </a></li>
<li><a href="#" class="addchar">c</a></li>
<li><a href="#" class="addchar">d </a></li>
</ul>
</body>
</html>
This is a fiddle link
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您选择从中获取代码的网站的代码并非万无一失。另外，在 IE 中，您通常需要在处理插入符号或选择位置之前将输入聚焦（使用其
focus()方法）。我建议使用我自己的 jQuery 插件来处理文本输入和文本区域选择。这是我所知道的唯一在 IE << 中 100% 正确运行的代码。 9.
The code from the site you chose to take it from is not foolproof. Also, in IE, you generally need to focus the input (using its
focus()method) before dealing with the caret or selection position.I'd recommend my own jQuery plug-in for dealing with text input and textarea selections. It's the only code I know that works 100% correctly in IE < 9.