Question

我有一个div来拾取一个keydown事件，一旦被解雇我想将焦点更改为输入字段以供用户输入文本。隐藏输入字段直到keydown。

我想以某种方式阻止默认的keydown事件，将事件目标更改为input元素，然后再次触发它，将输入的值插入输入。

有没有办法在激活之前更改keydown事件元素？

另一种方法是解释初始击键并输入该值作为输入元素的值，然后将焦点用于剩余输入。这有点麻烦但可能是必要的。

＆＃13;

$('.focus').keydown(function(e){
	$('input').addClass('keydown');
  e.preventDefault();
  e.target = $('input')[0];
  //fire event after target changed
});

＆＃13;

.container {
  position: relative;
}

.focus {
  border: 2px solid blue;
  text-align: center;
  padding: 0.5em;
  z-index:1
}

.focus:focus {
  border: 2px solid red;
}

input {
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  display: none;
}

input.keydown {
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="focus" tabIndex="-1">
    Click me and type a value.
  </div>
  <input placeholder="typed value should appear here"/>
</div>

＆＃13;

Answer 1

根据prasad上面的评论，

$('input').focus()可以解决问题。

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

.container {
  position: relative;
}

.focus {
  border: 2px solid blue;
  text-align: center;
  padding: 0.5em;
  z-index:1
}

.focus:focus {
  border: 2px solid red;
}

input {
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  display: none;
}

input.keydown {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="focus" tabIndex="-1">
    Click me and type a value.
  </div>
  <input placeholder="typed value should appear here"/>
</div>

Javascript更改keydown / keypress事件的目标元素

1 个答案: