javascript - 当用户使用 jquery 聚焦到 textarea 时显示按钮

Question

当用户将 cursur 带入文本框时，我希望文本框可见。

HTML：

<input type="text" id="text" name="sent" contenteditable="true"  style=" text-align: left; height: 30px; width:512px; " placeholder="Enter URL ..."/></input>
<button id="b1" style="display:none" > Get Sentiment </button>

这是我的 JS：

$(document).ready( function() {
    $("#text").bind("keypress", function( e ) {
        document.getElementById("b1").style.display = "block";
    });
});

JSFIDDLE：

http://jsfiddle.net/karimkhan/wJcNq/

按照我的说法，代码是正确的，但没有得到结果

Answer 1

试试这个新的小提琴：http: //jsfiddle.net/dHEGB/

$(document).ready( function() {
    $("#text").on("focus", function( e ) {
        $('#b1').show();
    });

    $("#text").on("blur", function( e ) {
        $('#b1').hide();
    });
});

确保您在 HEAD 中添加了 JQuery。

Answer 2

您正在使用该keypress事件，因此在用户实际键入密钥之前不会显示它。你想要的focus事件：

$(document).ready( function() {
    $("#text").bind("focus", function( e ) {
        document.getElementById("b1").style.display = "block";
    });
});

Answer 3

$(function() { // document ready
    $('input#text').on('keyup.showButton', function() { // creating keyup event with namespace
        $('button#b1').filter(':hidden').fadeIn(); // if button is hidden - show it
    });
});

Answer 4

你是否包含了 jQuery 库。？？我没有在 jsFiddle 中看到只是检查，这样可能会导致选择器出现问题。

只需包含库，您的代码就完美了。我已经测试过了。。