icono - title html

Sugerencia de campo de entrada HTML

Question

Quiero proporcionar al usuario una pista sobre lo que necesita para ingresar en mi campo de texto. Sin embargo, cuando establezco el valor, no desaparece una vez que un usuario hace clic en el campo de texto. ¿Cómo puedes hacer que desaparezca?

<form action="input_password.htm">
  <p>Username:<br><input name="Username" value="Enter username.." type="text" size="20" maxlength="20"></p>
</form>

Answer 1

Con HTML5, ahora puedes usar el atributo de marcador de posición como este:

<form action="demo_form.asp">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form> 

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

Answer 2

Con un poco de javascript

<input value="Enter username.." onfocus="if (this.value == ''Enter username..'') this.value=''''" ... />

HTML5 tiene un buen atributo para esto, llamado marcador de posición

<input placeholder="Enter username.." ... />

pero lo anterior no es compatible con los navegadores antiguos.

Answer 3

Creo que para su situación, lo fácil y simple para su entrada html, probablemente pueda agregar el título del atributo

<input name="Username" value="Enter username.." type="text" size="20" maxlength="20" title="enter username">

Answer 4

Definir texto de información sobre herramientas

<input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box"> 

Inicializar y configurar el script.

<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition(''right'');
tooltipObj.setPageBgColor(''#EEE'');
tooltipObj.setCloseMessage(''Exit'');
tooltipObj.initFormFieldTooltip();
</script> 

Answer 5

Esto es exactamente lo que quieres

$(document).tooltip({ selector: "[title]",
                              placement: "top",
                              trigger: "focus",
                              animation: false}); 

<form id="form">
    <label for="myinput1">Browser tooltip appears on hover but disappears on clicking the input field. But this one persists while user is typing within the field</label>
    <input id="myinput1" type="text" title="This tooltip persists" />
    <input id="myinput2" type="text" title="This one also" />
</form>

[ ref ]

Answer 6

La mejor manera de dar una pista es un marcador de posición como este:

<input.... placeholder="hint".../>

Answer 7

Necesitaría adjuntar un evento onFocus al campo de entrada a través de Javascript:

<input type="text" onfocus="this.value=''''" value="..." ... />

Answer 8

Si te refieres a un texto en segundo plano, yo diría que usas una etiqueta con el campo de entrada y la colocas en la entrada usando CSS, por supuesto. Con JS, se desvanece la etiqueta cuando la entrada recibe valores y se difumina cuando la entrada está vacía. De esta manera, no es posible que el usuario envíe la descripción, ya sea por accidente o por intención.

Answer 9

Tengo el mismo problema, y ​​agregué este código a mi aplicación y funciono bien para mí.

paso -1: agregó el complemento jquery.placeholder.js

paso -2: escribe el siguiente código en tu área.

$(function () {
       $(''input, textarea'').placeholder();
});

¡Y ahora puedo ver marcadores de posición en los cuadros de entrada!