如何在Javascript中聚焦文本框时显示按钮

我已经使用javascript为虚拟键盘编写了以下代码

Jsp页面：

 <form>
    <label for="text">Enter Text: </label>
    <input id="text" name="text" type="text" size="50" onfocus="myFunction(this)" />
    <input name="" type="reset" value="Clear" />
 </form>

当文本框像键盘一样聚焦显示对话框时，当我单击某个按钮时，它在文本框中输入的按钮值（大写、Shift、Enter和Tab除外）

请提供这些CAP、Shift、Enter和Tab所需的代码

我不知道如何在clicked（val）方法中维护代码

使用jQuery：

$("#text").on("focus", function() {
    $("#button1").show();
    $("#button2").show();
});

---

我刚刚注意到你评论了其他人的回答，说你想用JS动态创建按钮

以下是一种方法：

HTML:

<div id="myDiv"></div>

var myBtn = $('<button/>', {
    text: 'Awesome button',
    click: function () { 
        alert("Hello!");
    }
});

$("#myDiv").append(myBtn);

jQuery:

<div id="myDiv"></div>

var myBtn = $('<button/>', {
    text: 'Awesome button',
    click: function () { 
        alert("Hello!");
    }
});

$("#myDiv").append(myBtn);

var myBtn=$（''{
文字：“很棒的按钮”，
单击：函数（）{
警惕（“你好！”）；
}
});
$（“#myDiv”）。追加（myBtn）；

---

我希望下面的例子会有所帮助：

    <script type="text/javascript">
    <!--
    function fClose() {
        document.getElementById('divWithButtons').style.display = 'none';
    }

    function myFunction(x) {   
        document.getElementById('divWithButtons').style.display = '';
    }
    //-->
    </script>

    <div style="display:none; position:absolute; top: 100px; left: 100px; background-color: #eee;" id=divWithButtons>
        <input type=button value=Really onclick=fClose() style="margin: 100px">
        <input type=button value="Why not" onclick=fClose() style="margin: 100px">
    </div>

    <form>
        <label for="text">Enter Text: </label>
        <input id="text" name="text" type="text" size="50" onfocus="myFunction(this)" />
        <input name="" type="reset" value="Clear" />
    </form>

输入文本：

试试这个

HTML

输入文本：

剧本

   $(function() {
   $("#text").focusin(function() {
    $('form').append('<button class="btn">Btn1</button>\
    <button class="btn">Btn2</button>'); // It will add dynamically two buttons
    $(".btn").show();
   })
 });

$（函数（）{
$（“#文本”）.focusin（函数（）{
$（'form'）。追加（'Btn1\
Btn2'）；//它将动态添加两个按钮
$（“.btn”）.show（）；
})
});

编写如下功能：
函数myFunction（x）
{
document.getElementById（“btn1”）.style.display=“block”；
document.getElementById（“btn2”）.style.display=“block”；
}
还可以设置按钮的id。
输入文本：
Btn1
用jQuery试试这个：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script  type="text/javascript">

   jQuery( document ).ready(function() {    
     jQuery("#text").focus(function() {
       jQuery('.btn').show();
     });

 // if you want button disappear after focus out
 jQuery("#text").focusout(function() {
   jQuery('.btn').hide();
 });

   });
</script>

...

<form>
   <label for="text">Enter Text: </label>
   <input id="text" name="text" type="text" size="50" />
   <input name="" type="reset" value="Clear" />
   <input class="btn" type="button" value="button2"  name="btn2" style="display:none;"/>
   <input class="btn" type="button" value="button1" name="btn1" style="display:none;"/>
 </form>


jQuery（文档）.ready（函数（）{
jQuery（“#text”）.focus（函数（）{
jQuery（'.btn'）.show（）；
});
//若你们想在调焦后按钮消失
jQuery（“#text”）.focusout（函数（）{
jQuery（'.btn'）.hide（）；
});
});
...
输入文本：
当我使用html时，答案很有用，但我想通过javascript动态创建按钮，因为我正在创建键盘按钮尼斯永远不可点击的按钮；）@朱利安。我以为你现在就想那样check@user2996174检查这一个fadein/可能是fadeOut？
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script  type="text/javascript">

   jQuery( document ).ready(function() {    
     jQuery("#text").focus(function() {
       jQuery('.btn').show();
     });

 // if you want button disappear after focus out
 jQuery("#text").focusout(function() {
   jQuery('.btn').hide();
 });

   });
</script>

...

<form>
   <label for="text">Enter Text: </label>
   <input id="text" name="text" type="text" size="50" />
   <input name="" type="reset" value="Clear" />
   <input class="btn" type="button" value="button2"  name="btn2" style="display:none;"/>
   <input class="btn" type="button" value="button1" name="btn1" style="display:none;"/>
 </form>