Selecting textbox value when pressing the next button

Question

I have a grid of textboxes. When the user presses the arrow button I need the cursor to select the contents of the textbox in the direction they have just pushed. I have tried using JQuery's .select() method, but this doesnt seem to work in IE.

Could you give me suggestions on how to get this working?

Thanks in advance.

score 0 · Answer 1 · answered Jul 06 '10 at 09:46

0

Just use the text box's select() method, which works in all major scriptable browsers, so long as you've focussed it first:

<input type="text" id="aTextBox" value="Some text">
<script type="text/javascript">
    var textBox = document.getElementById("aTextBox");
    textBox.focus();
    textBox.select();
</script>

answered Jul 06 '10 at 09:46

Tim Down

318,141
75
454
536

I found this: http://stackoverflow.com/questions/492865/jquery-keypress-event-not-firing – mplungjan Jul 06 '10 at 12:08
Right, when pressing arrow, fine. I inferred (possibly incorrectly) from the question that that was not the problem and was incidental. The bit that seemed to be the problem was the selection: *"I have tried using JQuery's .select() method, but this doesnt seem to work in IE."* – Tim Down Jul 06 '10 at 12:25
Tim you were correct. The issue was the selecting of the text in the textbox. The pressing of the arrow was incidental. I was trying togive some informatino around what I was doing. – Steve Jul 06 '10 at 13:19

score 0 · Accepted Answer · answered Jul 06 '10 at 12:36

Can someone fix the right and left here? Up and down does the trick, navigating inside the textboxes seem to take precedense

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test tab</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript">
function checkKey(e){
     switch (e.keyCode) {
        case 40:
            current = $("#field1"); 
            $("#msg").html(current.id); 
            setTimeout('focusIt()',100);
            break;
        case 38:
            current = $("#field3"); // or some more clever way of finding the last field
            $("#msg").html(current.id); 
            setTimeout('focusIt()',100);
            break;
        case 37:
            if (prev) current = prev;
            else current = $("#field3"); // or some more clever way of finding the last field
            $("#msg").html(current.id); 
            setTimeout('focusIt()',100);
            break;
        case 39:
            if (next) current = next; 
            else current = $("#field1")
            $("#msg").html(current.id); 
            setTimeout('focusIt()',100);
            break;
        default:

            }      
}
function focusIt() {
  if(current) {current.focus(); current.select() }
}
var current,next,prev;
$(document).ready(function() {
  if ($.browser.mozilla) {
    $("input").keypress (checkKey);
  } else {
    $("input").keydown (checkKey);
  }
  $("input").focus(function() {
    current=this;
    $("#msg").html(current.id);
    next = $("field"+(parseInt(current.id.replace('field',''))+1));
    prev = $("field"+(parseInt(current.id.replace('field',''))-1));
  });
});
</script>
</head>
<body>
<div id="pagecontent" style="width:95%; margin:10px 10px 10px 10px">
   <form>
   <input type="text" id="field1" value="first"/><input type="text" id="field2" value="second"/><input type="text" id="field3" value="third"/>
   </form>
   <span id="msg"></span>   
</div>
</body>
</html>

score 0 · Answer 3 · answered Jul 06 '10 at 12:39

0

<input type="text" id="aTextBox" value="Some text">
<script type="text/javascript">
    $('#TextBox').focus().select();
</script>

Try using both of them in one line

answered Jul 06 '10 at 12:39

RobertPitt

56,863
21
114
161

Thanks Robert I did try them on one line but it didnt seem to work. – Steve Jul 06 '10 at 13:25

Selecting textbox value when pressing the next button

3 Answers3