当用户使用 jquery 将焦点聚焦到文本区域时显示按钮

Show button when user focus into textarea using jquery

本文关键字：文本 区域 按钮 显示 聚焦 焦点 用户 jquery      更新时间：2023-09-26

我希望当用户将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/

代码按照我的方式是当前的，但没有得到结果

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

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

确保已在 HEAD 中添加了 JQuery。

您使用的是 keypress 事件，因此在用户实际键入密钥之前不会显示该事件。您希望focus事件：

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

$(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
    });
});

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

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

相关文章：