javascript - Focus on field after keydown event without inserting character - Stack Overflow

admin管理员组

文章数量:1344236

I have a shortcut key K. It should focus on my input, but I don't want it to insert the letter K when it focuses.

$(document).keydown(function(event) { 
    if (event.which == 75) {
        $('input').focus();
    }
});

<script src=".1.0/jquery.min.js"></script>
<input type="text">

I have a shortcut key K. It should focus on my input, but I don't want it to insert the letter K when it focuses.

$(document).keydown(function(event) { 
    if (event.which == 75) {
        $('input').focus();
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text">

• javascript
• jquery

Share Improve this question Follow edited Jan 12, 2016 at 11:03 Praveen Kumar Purushothaman 167k2727 gold badges213213 silver badges260260 bronze badges asked Jan 12, 2016 at 10:52 Paran0aParan0a 3,45733 gold badges2727 silver badges4848 bronze badges 1

• event.preventDefault(); – Johannes Jander Commented Jan 12, 2016 at 10:53

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You can use event.preventDefault() to stop the standard behaviour of the event. Note however that this will stop the letter K from being able to be typed in the input. To allow that you need to add a keydown handler to the input itself which stops the event propagation reaching the document. Try this:

$(document).keydown(function(event) {
  if (event.which == 75) {
    event.preventDefault();
    $('input').focus();
  }
});

$('input').keydown(function(e) {
  e.stopPropagation();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text">

This is another way:

At the time of keydown, if it is k and the input does not have focus then prevent the default behavior and give focus to the text field.

$(document).keydown(function(event) {
  if (event.which == 75 && !$('input').is(":focus")) {
    event.preventDefault();
    $('input').focus();
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text">

If you want to abruptly stop the propagation, you can also use return false;:

$(document).keydown(function(event) {
  if (event.which == 75) {
    $('input').focus();
    return false;
  }
});
$('input').keydown(function(e) {
  e.stopPropagation();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text">

var input = $('input');

$(document).on('keyup', function (e) {
  if(input.is(':focus')){
    return;
  }
  if (e.which == 75) {
        input.focus();
    }
});

1. Listen to the keyup event;
2. If the input is already focused, don't focus again.

本文标签： javascriptFocus on field after keydown event without inserting characterStack Overflow