Accessing variable in javascript after onpaste event

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Submit Form</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
    <script src="domready.js"></script>
    <script>
    DomReady.ready(function() {
        (function () {
            var Username =document.getElementById("Username").onpaste = function() {username()};
            alert(Username.length);

            var Password = document.getElementById("Password").onpaste = function() {validate()};
            var DOB = document.getElementById("DOB").onpaste = function() {validate()};
            var Email = document.getElementById("Email").onpaste = function() {validate()};
            var Country = document.getElementById("Country").onpaste = function() {validate()};

            function validate(){
                setTimeout(username, 3000);
            }

            function username(Username){
                /*if(Username.value <= 5){*/
                    alert(Username.length); 
            }

        })();
    });
    </script>
</head>
<body>
    <div id="wrp">
        <form action="">
            <div>
                <label for="Username">Username</label>
                <input type="text" id="Username">
            </div>
            <div>
                <label for="Password">Password</label>
                <input type="password" id="Password">
            </div>
            <div>
                <label for="DOB">Date of birth</label>
                <input type="text" id="DOB">
            </div>
            <div id="wrp-gender">
                <label for="Gender" id="Gender">Gender</label>
                <div id="wrp-radio-btn">
                    <label for="Male">Male</label>
                    <input type="radio">

                    <label for="Female">Female</label>
                    <input type="radio">
                </div>
            </div>
            <div>
                <label for="Email">Email</label>
                <input type="text" id="Email">
            </div>
            <div>
                <label for="Country">Country</label>
                <input type="text" id="Country">
            </div>
            <div>
                <input type="submit" value="Submit" id="Submit">
            </div>
        </form>
    </div>
</body>
</html>

The alert(Username.length) statement does get executed & an alert box pops up with value of 0.

Why is the value of variable Username null or 0 when I enter a value in input box?

I am not filling it but trying to detect a past & to do validation. I am going to write a separate function to validate users input when user is typing (filling) something. — Himanshu, Dec 08 '14 at 15:08
Your "username" function has "Username" as a *parameter*. Nothing is going to pass it a string as a parameter, however. — Pointy, Dec 08 '14 at 15:09
@pointy Just ignore the "Username" parameter for the time. Just assume that it is function username() — Himanshu, Dec 08 '14 at 15:20

andrew · Accepted Answer · 2014-12-08T15:36:10.087

3

I saw something similar when I was using jQuery's paste event.

Its a strange one, I think the paste event fires before the text is actually pasted into the input.

I was able to solve it using setTimeout to push it to the end of the event queue

var Username = document.getElementById("Username");
Username.onpaste = username;


function username(){
    setTimeout(function(){
            alert(Username.value.length);      
     });
  }

fiddle

edited Dec 08 '14 at 15:36

answered Dec 08 '14 at 15:07

andrew

9,313
7
30
61

Where is the value of "Username" supposed to come from? Also, your supposition is incorrect; the value of an `` is updated before the "paste" event handler is called. *edit* no - I take that back; you're right! Wow. – Pointy Dec 08 '14 at 15:10
1

@Pointy updated for `Username` varaible. Are you sure? the linked [answer](http://stackoverflow.com/questions/10972954/javascript-onpaste) by @chidram seems to suggest the same – andrew Dec 08 '14 at 15:14
The above code does not work. I get a alert box with "undefined" – Himanshu Dec 08 '14 at 15:18
1

@Himanshu, sorry, yes, should be `Username.value.length` , edited, please see the fiddle – andrew Dec 08 '14 at 15:25

Accessing variable in javascript after onpaste event

1 Answers1