当用户开始输入输入时更改 css答案

【问题标题】：Change css when user starts typing in input当用户开始输入输入时更改 css
【发布时间】：2013-02-11 01:01:40
【问题描述】：

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

我对 jquery 有所了解，但我不知道该怎么做。

谁能帮帮我？

【问题讨论】：

【解决方案1】：

我会使用 keyup 或 keydown 事件：

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

【讨论】：

最好为要显示的元素缓存选择器，否则每次用户按下该字段时，您都会创建一个新的 jQuery 对象。
我还要指出，在复制粘贴或自动填充时，这不会捕获它。请参阅：stackoverflow.com/a/2826423/686036。 oninput 在兼容 HTML 5 的浏览器中，这将获得这些类型的输入。
@blo0p3r - input 事件的支持真的很差，而且到处都是错误，这就是为什么没有人使用它。
@adeneo 不知道这一点。我会更深入地研究它。谢谢！假设它有这么多的错误并且有更多的支持，这将是解决这个问题的好方法吗？
@blo0p3r - 是的，如果input 事件得到更好的支持并且工作令人满意，那就太好了。今天通常使用$('input').on('keyup paste change', function() { ...}); 等来捕获许多事件，input 事件会使其更容易，但截至目前，它几乎不能在最现代的浏览器中运行，因此在生产网站上使用它不是大多数人。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

var to_show = $('#your_div');

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

【讨论】：

【解决方案4】：

根据此处的答案：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 候选推荐，它应该/将在大多数新版本的浏览器中实现，如果它还没有实现的话。

【讨论】：

【解决方案5】：

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

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

【讨论】：