Как сделать заполнитель кликабельным?

Question

На моем веб-сайте я хотел бы создать поле ввода с помощью заполнителя, например «Пароль. Пример: abcdef», при этом «abcdef» можно щелкнуть. Если пользователь нажимает «abcdef», значение ввода меняется на «abcdef». Как я могу это сделать, пожалуйста? Я готов использовать jQuery, если это необходимо.

(Очевидно, что я не собираюсь это делать для поля «пароль», это был всего лишь пример).

Answer 1

Как я уже говорил, вы можете сделать это с помощью элемента наложения.

Демо:http://jsfiddle.net/jt05w77x/3/

Markup

<input type="text"> 
<div class="placeholder">Name. Ex: <a href="#">John</a></div> 

CSS

div.placeholder { 
    position: absolute; 
} 

JavaScript

// position the div 
var tbox = $('input[type="text"]'), 
     pholder = $('.placeholder') 

pholder 
    .css({ 
     top: tbox.offset().top + 'px', 
     left: tbox.offset().left + 'px', 
     height: tbox.outerHeight() + 'px', 
     width: tbox.outerWidth() + 'px', 
    }) 
    .on('mousedown', 'a', function() { 
     pholder.hide(); 
     var text = $(this).text(); 
     setTimeout(function() { 
      tbox.val(text).focus(); 
     }, 50); 
     return false; 
    }) 
    .on('mousedown', function() { 
     pholder.hide(); 
     setTimeout(function() { 
      tbox.val('').focus(); 
     }, 50); 
    }); 

tbox.on('blur', function() { 
    if($(this).val() === '') pholder.show(); 
}); 

Answer 2

демо - http://jsfiddle.net/victor_007/rtgmr68L/

$('#val').on('focus', function() { 
    val = $(this).attr('placeholder') 
    $(this).attr('value', val) 
})