HTML input field hint | 易学教程

问题

I want to provide the user with a hint on what he needs to enter into my text field. However, when I set the value, it does not disappear once a user clicks on the text field. How can you make it disappear?

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

回答1:

You'd need attach an onFocus event to the input field via Javascript:

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

回答2:

With a bit of javascript

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

HTML5 has a nice attribute for this, called placeholder

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

but above is not supported in old browsers.

回答3:

the best way to give a hint is placeholder like this:

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

回答4:

I think for your situation, the easy and simple for your html input , you can probably add the attribute title

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

回答5:

With HTML5, you can now use the placeholder attribute like this:

<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

回答6:

This is exactly what you want

$(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]

回答7:

I have the same problem, and I have add this code to my application and its work fine for me.

step -1 : added the jquery.placeholder.js plugin

step -2 :write the below code in your area.

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

And now I can see placeholders on the input boxes!

回答8:

If you mean like a text in the background, I'd say you use a label with the input field and position it on the input using CSS, of course. With JS, you fade out the label when the input receives values and fade it in when the input is empty. In this way, it is not possible for the user to submit the description, whether by accident or intent.

回答9:

Define tooltip text

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

Initialize and configure the script

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

来源：https://stackoverflow.com/questions/6280034/html-input-field-hint

标签

html

textfield

hint