keydown/keypressイベントのJavascriptの変更対象要素

Question

私は、keydownイベントをピックアップするdivを持っています。一度起動すると、ユーザーがテキストを入力するための入力フィールドにフォーカスを変更したいと思います。入力フィールドはkeydownまで非表示になっています。

私は何らかの形でデフォルトのkeydownイベントを防止し、イベントターゲットをinput要素に変更してから、入力された値を入力に再度挿入して起動します。

keydownイベント要素を起動する前に変更する方法はありますか？

---

もう1つの方法は、最初のキーストロークを解釈し、それを入力要素の値として入力し、残りの入力をフォーカスすることです。少し難解だが必要かもしれない。

---

https://jsfiddle.net/fr5xrsyd/4/

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

.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>

Answer 1

$('input').focus()上記プラサドさんのコメントどおりにトリックを行います。

$('.focus').keydown(function(e){ 
 
\t $('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>