当用户开始输入时更改css

Change css when user starts typing in input

本文关键字：css 输入 用户 开始      更新时间：2023-09-26

我正在构建一个网站，一旦用户开始输入第一个输入，我就希望div从display: none;变为display: block;。

我对jquery有所了解，但我不知道如何做到这一点。

有人能帮我吗？

我会使用keyup或keydown事件：

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

FIDDLE

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

您可以使用keydown事件（change只有在input失去焦点时才会触发）：

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

根据这里的答案：https://stackoverflow.com/a/2826423/686036，您可能希望使用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候选推荐，如果它还没有实现，那么它应该/将在大多数新版本的浏览器中实现。

您可能可以将更改事件与jquery一起使用：

    $('input').change(function() {
        $('#your-div').show();
    });
相关文章：