CODEWITHSUNDEEP
javascriptjqueryhtml
user2996174
user2996174

Reputation: 1481

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

I have written the following code for a virtual keyboard using javascript.

Jsp page:

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





        },

});

When the text box is focused display dialog like keyboard, when i click some button its entered button value in textbox except Caps,Shift,Enter and Tab.

Please provide the required code for those Caps,Shift,Enter,Tab .

I'm not sure how to maintain code in clicked(val) method .

Upvotes: 1

Views: 1995

Answers (5)

martynas
martynas

Reputation: 12300

Use jQuery:

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

I just noticed you commented on somebody else's answer saying you want to create buttons with JS dynamically.

Here's a way to do it:

HTML:

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

jQuery:

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

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

DEMO

Upvotes: 2

girardengo
girardengo

Reputation: 725

try this with 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>

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20418

Try this

HTML

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

Script 

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

Upvotes: 0

Naveen Chandra Tiwari
Naveen Chandra Tiwari

Reputation: 5123

 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.

Upvotes: 0

blue
blue

Reputation: 1949

I hope the following example would be helpful:

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

Upvotes: 0

Related Questions