Убираем placeholder при клике по input

В html5 есть атрибут placeholder. Placeholder — выводит текст внутри поля формы и исчезает когда пользователь начинает вводить символы. Но бывают моменты когда нужно убирать placeholder во время свойства .focus, то есть при клике мышкой в поле формы. Есть два способа — CSS или jQuery. Код очень простой и будет действовать на все input и textarea.
jQuery
$(document).ready(function () {
$(‘input,textarea’).focus(function(){
$(this).data(‘placeholder’,$(this).attr(‘placeholder’))
$(this).attr(‘placeholder’,»);
});
$(‘input,textarea’).blur(function(){
$(this).attr(‘placeholder’,$(this).data(‘placeholder’));
});
});

CSS
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

Share this post:

Recent Posts

Leave a Comment