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

How to display buttons when a text box is focused in Javascript

本文关键字：显示 按钮 文本 聚焦 Javascript      更新时间：2023-09-26

我使用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>
Javascript: 

 function myFunction(x)
    {                    
    }
    function clicked(val)
    {   
        var txt;
        txt = document.getElementById('text').value;
        if(val != 'B')
        {
            txt = txt + '' + val;
        }
        else
        {
            txt = txt.substr(0,(txt.length)-1);
        }
        document.getElementById('text').value = txt;
    }
 $(".dialog").dialog({
        autoOpen: false,
        height: 200,
        width: 930,
        modal: false,
        draggable: true,
        resizable: true,
        buttons : {
                        "ESC":function(){
                var val="Esc";
                clicked(val);
            },
            "1":function(){
                var val="1";
                clicked(val);
            },
            "Tab":function(){
                var val="T";
                clicked(val);
            },
            "Caps":function(){
                var val="q";
                clicked(val);
            },


            "Shift":function(){
                var val="";
                clicked(val);
            },
            "B":function(){
                var val=" ";
                clicked(val);
            },


        },
});

当文本框聚焦时，显示像键盘一样的对话框，当我点击某些按钮时，它在文本框中输入的按钮值除了Caps,Shift,Enter和Tab。

请提供这些大写，Shift,Enter,Tab所需的代码。

我不确定如何在单击(val)方法中维护代码。

使用jQuery:

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

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

方法如下:

HTML: 

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

var myBtn = $('<button/>', {
    text: 'Awesome button',
    click: function () { 
        alert("Hello!");
    }
});
$("#myDiv").append(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>

 Wrtie the function like this:
 function myFunction(x)
 {
  document.getElementById("btn1").style.display="block";    
  document.getElementById("btn2").style.display="block";             
 }

Also set the id of buttons as well.
<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" />
 <button id="btn1" class="btn">Btn1</button>
 <button id=btn2" class="btn">Btn2</button>
</form>
Hope this will work for you.

试试这个

HTML 

<form>
    <label for="text">Enter Text: </label>
    <input id="text" name="text" type="text" size="50" />
    <input name="" type="reset" value="Clear" />
</form>
脚本

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

尝试使用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>
相关文章：