<input type="text" size="13px" name="username" id="username" value="enter username" onclick='document.signIn.username.value = ""' />

$(function() {
    $('#messageBoxSignIn').click(function() {
        $('#username').val('');
        $('#username').focus();
    });
});

Actualmente tengo el código jQuery haciendo que el valor de entrada sea nulo y enfocando el cursor en el área de texto #username cuando se hace clic en un botón con ID #messageBoxSignIn. Sin embargo, cuando un usuario hace clic fuera del área de texto #username sin ingresar nada, quiero que el valor ingresado vuelva a "ingresar nombre de usuario" .

¿Cómo hago esto?

0
Simon Suh 12 may. 2016 a las 18:15

4 respuestas

La mejor respuesta

Si HTML5 está bien para usted, puede usar el atributo placeholder para esto. No necesitas jQuery.

<input type="text" placeholder="Enter Username">

Puede probarlo aquí.

2
Chintan 12 may. 2016 a las 15:28

Estás haciendo esto mal. Debe agregar el atributo 'marcador de posición' al elemento de entrada. No necesitas todo este javascript. El navegador hará el reemplazo por su cuenta.

http://www.w3schools.com/tags/att_input_placeholder.asp

1
Xavier J 12 may. 2016 a las 15:28
$('#username').blur(function(){
    if ($(this).val().length == 0) {
        $(this).val('Enter Username');
    }
});

O

$('#username').on('blur', function() {
    if ($(this).val().length == 0) {
        $(this).val('Enter Username');
    }
});
1
Dallas Caley 12 may. 2016 a las 15:18
<input type="text" name="search" value="enter username" onblur="if(this.value == '') { this.value='enter username'}" onfocus="if (this.value == 'enter username') {this.value=''}">

https://jsfiddle.net/IA7medd/ur9ctku2/

1
Ahmed Salama 12 may. 2016 a las 15:23