jquery text input change on button click_问答_开发者

jquery text input change on button click

开发者 https://www.devze.com 2023-04-01 03:24 出处：网络

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;
   开发者_C百科 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

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.