what the best way to display a default text in textbixes and textareas

前端 未结 2 594
生来不讨喜
生来不讨喜 2021-01-21 08:30

A form on my website\'s contact -us HTML page has two fields

1) subject

2) message

When the page loads for the first time I want these two boxes to displ

2条回答
  •  迷失自我
    2021-01-21 08:57

    Oh, I really need to finish writing my article on this subject. Here's the unpolished version:

    First — a message describing what to enter into a field is not a default value. Default values are things which could be conceivably submitted (such as a country being entered based on GeoIP, or a delivery address from customer records).

    Second — using the default value as a fake label and then wiping it when the user focuses it (presumably you don't want the user to have to manually delete the message) causes accessibility problems. Screen readers read out the content that is focused, if you delete it when it becomes focused, they can't get the information.

    The best option, in my opinion, is to place a next to the control. Webpages aren't typically short on space — scrollbars are not evil.

    If you really want it to look like it is in the control then:

    1. Put the and in a
    2. Set a class on that
      using JavaScript (so you don't have a crap experience is JS isn't available)
    3. Apply CSS to set the
      to position: relative and give it a size.
    4. Make the background of the transparent and style it to fill the div
    5. Position the under the
    6. Write a function that checks to see if the value of the input is an empty string or not. Toggle a class on the div on and off depending on the answer.
    7. When that class is set on the div, set text-indent to a high negative length (such as -999em) so that the text is hidden off screen (but still available to screen readers)

提交回复
热议问题