使用Javascript更改keydown/keypress事件的目標元素

我有一個接收keydown事件的div，一旦觸發，我想將焦點更改爲用戶輸入文本的輸入字段。輸入字段隱藏，直到keydown。使用Javascript更改keydown/keypress事件的目標元素

我想以某種方式防止默認的keydown事件，將事件目標更改爲輸入元素，然後再次觸發它將類型值插入輸入。

有沒有辦法在啓動之前更改keydown事件元素？

另一種方式是解釋初始鍵盤輸入，並將其輸入爲輸入元素的值，然後將焦點輸入到其餘輸入。這是一個有點混亂，但可能是必要的。

$('.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>

來源

2016-12-07 Ryan King

*「有沒有辦法讓它火前更改keydown事件元素？」 * - 你說你正在試圖應對這樣做是爲了要同keydown事件改變，所以那個時候事件已經發生了。順便說一句，爲什麼你不可能讓只有鍵盤的用戶使用你的頁面？ – nnnnnn

所以唯一的方法是解釋初始擊鍵，並將其作爲輸入元素的值輸入，然後將輸入集中到其餘擊鍵？ –

@RyanKing嘗試'$（'input'）。focus（）' – prasanth

$('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>

來源

2016-12-07 06:36:50

使用Javascript更改keydown/keypress事件的目標元素

回答

相關問題