Add text to the input (virtual keyboard)

Question

Add text to the input (virtual keyboard)

Navigation

#1 by (2 votes)
#2 by (0 votes)

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

But when you click the button that refers to the number to enter the password, it does not add to the password field.

How do I do that by clicking on any of the numbers displayed inside the for, add the value of the button to the input?

jquery

asked by anonymous 18.05.2016 / 01:49

2 answers

0

If anyone needs it, I'm posting the complete solution based on our friend Wesley's response.

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

18.05.2016 / 15:00

I have a question regarding the installation and configuration of composer (PHPUnit) Animation is not smooth

score 2 · Accepted Answer

I was able to do this by using javascript to add the value of the button to the field defined as 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)">

Example working: link