jQuery文本输入按钮单击更改
[英]jquery text input change on button click
问题描述
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 . 
我在该站点中使用了几个线程，并为ie的selectionStart和selectionEnd工作修复了其他线程，并决定从该站点实现代码。
In simple html page there are multiple textfields with common class and unique id. 在简单的html页面中，有多个具有通用类和唯一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. 如果选择了一些文本，在mozilla和chrome中也可以正常工作。 But there is problem in other browsers 但是其他浏览器有问题
opera - pacing text is fine but on selection instead replacing text it adds to selection end (ie 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>
1 个解决方案
解决方案1
0 2011-09-01 15:57:11
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. 此外，在IE中，通常需要先处理输入（使用其focus()方法），然后再处理插入符号或选择位置。
I'd recommend my own jQuery plug-in for dealing with text input and textarea selections. 我建议使用自己的jQuery插件来处理文本输入和textarea选择。 It's the only code I know that works 100% correctly in IE < 9. 这是我所知道的唯一在IE <9中100％正确运行的代码。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.