Question

我使用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。

请提供这些Caps，Shift，Enter，Tab所需的代码。

我不确定如何在clicked（val）方法中维护代码。

Answer 1

使用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);

DEMO

Answer 2

我希望以下示例对您有所帮助：

    <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>

Answer 3

试试这个

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

DEMO

Answer 4

 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.

Answer 5

尝试使用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>

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

5 个答案: