用戶開始輸入輸入時更改CSS

Question

我正在建立一個網站，但我希望div不再display: none; display: block; 用戶一旦開始輸入第一個輸入，便會立即開始。

我對jquery有所了解，但是我不知道該怎么做。

誰能幫我？

Answer 1

我會使用keyup或keydown事件：

$('input').on('keyup', function() {
    if ( !$('div').is(':visible') ) $('div').show();
});

小提琴

Answer 2

$('#input').keyup(function(){
    $('your_div').css('display','block');
});

Answer 3

您可以使用keydown事件（僅當input失去焦點時才會觸發change ）：

var to_show = $('#your_div');

$('input').keydown(function() {  
    if(!to_show.is(':visible'))
    {
        to_show.show();
    }
});

Answer 4

根據此處的答案： https ： oninput ，您可能希望使用oninput的HTML 5語法。 這將負責自動填充或右鍵單擊粘貼功能。

您輸入的內容將如下所示：

<input id="myInput" type="text" />

和JavaScript：

var myInput = document.getElementById("myInput");
myInput.addEventListener('input', myFunction(), true);

或者，如果需要使用JQuery：

$('#myInput').bind('input', function() {
    alert('User clicked on "foo."');
});

現在HTML 5是W3C的候選推薦 ，如果尚未實現，它應該/將在大多數新版本的瀏覽器中實現。

Answer 5

您可能可以將change事件與jquery一起使用：

    $('input').change(function() {
        $('#your-div').show();
    });