Question

<input type="text" 
       name='username'  
       onblur="if(this.value=='')this.value='Username';" 
       onfocus="if(this.value=='Username')this.value='';"
       value="Username" 
       class="register"/>

This is the code that I am using but the way my code is setup I want the text to be viewable in the field before the user types in their information but the way the form is setup now the

value="<?php echo $db_first_name; ?>"

but the code i’m using needs

value="Username"

to display username in the field before clicked by user and put in their own information.

I tried

value="Username<?php echo $db_first_name; ?>" 

But obviously that did not work. Any Ideas?

Link to view functionality of form: http://odconnect.com/beta/registration2.php

Answer 1

Try the placeholder attribute (valid as of HTML5):

<input type="text" name="username" id="username" placeholder="Username" value="<?= $db_first_name; ?>" />

Alternatively (in other words, if you want to support users whose browsers don’t support HTML5), you can test to see whether the user already has a username entered. If it’s null or an empty string, set the value to “Username” otherwise, set the value to the value of $db_first_name. Then change the onBlur event to check for the length of the value of the field, and if the length is zero, have it display “Username”. Finally, change the onFocus event to listen for a mouse-click – when the user gives focus to the field, set the value to an empty string.

<input type="text" name="username" id="username" value="<?= $db_first_name == "" ? "Username" : $db_first_name ?>" onBlur="checkUsernameBlur(this, 'Username');" onFocus="checkUsernameFocus(this, 'Username');" />

<script type="text/javascript" language="javascript>
    function checkUsernameBlur(inputObj, label) {
        var strLen = inputObj.value.length;
        if (strLen == 0) {
            inputObj.value = label;
        }
    }

    function checkUsernameFocus(inputObj, label) {
        var value = inputObj.value;
        if (value == label) {
            inputObj.value = "";
        }
    }
</script>