Add text to input (virtual keyboard)

Asked

Viewed 498 times

3

I wrote the following script:

<input type="password" class="email password_action" placeholder="Account Password" id="user_password"  name="user_password" required>
<? for($i=0; $i<=9; $i++){ ?>
    <button id="keyboard_<?=$i;?>" class="btn btn-default" type="button" value="<?=$i;?>"><?=$i?></button>
    <script language="javascript">

        $(document).ready(function() {
            var valueKey = $('#keyboard_<?=$i;?>');

            valueKey.click(function(){
                //$("#user_password").attr("value",valueKey.val());
                $('#user_password').append($('#user_password').attr(valueKey.val()));
                alert(valueKey.val());
            });
        });
    </script>
<? } ?>

inserir a descrição da imagem aqui

Only that by clicking the button that refers to the number to enter the password, it does not add in the password field.

As I do so by clicking on any of the numbers shown inside the for, add the value of the button to the input?

jquery

2 answers

2


I was able to use javascript to add the value of the button to the field set to id="user_password":

function moveNumbers(num) { 
    var txt=document.getElementById("user_password").value; 
    txt=txt + num; 
    document.getElementById("user_password").value=txt; 
}
<input type="password" class="email password_action" placeholder="Account Password" id="user_password"  name="user_password" required><p>
<input type="button" value="1" name="no" onclick="moveNumbers(this.value)">  
<input type="button" value="2" name="no" onclick="moveNumbers(this.value)">  
<input type="button" value="3" name="no" onclick="moveNumbers(this.value)">

Working example: https://jsfiddle.net/hiperportal/zga8r4pz/

  • Good morning, and to add a "Backspace" button together?

  • If I put an Alert(txt), it comes the numbers as they are pressed, but does not fill in the field

  • It worked, I changed the name of the field and it worked well! I will post the full script. In case someone needs.

  • 1

    Sorry, I just got back, glad you got :D

0

In case anyone needs it, I’m posting the complete solution based on the answer from our friend Wesley

<div class="controls">
    <input id="userpassword"  placeholder="Account Password" class="email" name="userpassword" type="password" readonly="" required/>
    <? for($i=0; $i<=9; $i++){ ?>
        <input type="button" value="<?=$i?>" name="no" onclick="moveNumbers(this.value)" class="btn btn-default">  
    <? } ?>
        <input type="button" value="«" name="backspace" onclick="moveNumbers(this.name)" class="btn btn-default"> 
</div>


<script>
    function moveNumbers(num) { 
        var txt=document.getElementById("userpassword").value; 
        if(num=='backspace'){
            var width = $('#userpassword').val().length-1;
            var text_ad = $('#userpassword').val();
            var text_ad_out = text_ad.substring(0,width);
            $('#userpassword').val(text_ad_out);
        } else {
            txt=txt + num; 
            document.getElementById("userpassword").value=txt; 
        }
    }
</script>

inserir a descrição da imagem aqui

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.