Tommy Hodgins

UX Developer Joined about 1 year ago

  • 6 stories
  • 1 comment
  • 1 upvote
  • Posted to Placeholders are problematic, Jan 16, 2017

    I think the advice is never to have the instruction be present only as the placeholder. Nothing is more annoying than having to empty a field to check what you were supposed to enter into it.

    Why not use a solution that says: display a label and a placeholder, and any time an input isn't empty, display the placeholder text inside the element. Any time a field has text in it, display that placeholder somewhere else visually near the field.

    <label>
      <input placeholder="Enter your Name">
    </label>
    
    <style>
      label:after {
        display: block;
        font-family: sans-serif;
        font-size: 9pt;
        color: #999;
      }
      @element 'input' and (min-characters: 1) {
        $parent:after {
          content: 'eval("placeholder")';
        }
      }
    </style>
    
    <script src=http://elementqueries.com/EQCSS.js></script>
    

    There's one quick solution!

    0 points
Load more comments