jquery text input change on button click
Question
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 (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>
This is a fiddle link
1 answers
solution1
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.