Rê chuột vào thẻ input xóa placehoulder

Có nhiều cách để xử lý với thẻ placeholder, CSS 3 đã cho phép onfocus xóa thẻ placehoulder…

Làm thế nào khi click chuột vào thẻ input thì mất text trên thuộc tính placehoulder?

Ở bài viết này nhantam sẽ giới thiệu 2 cách

Cách 1: Sử dụng javascript jquery
Khi báo code như sau:

<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />

Cách 2: Sử dụng CSS 3
Khai báo code css như sau:

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */
    
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

HTML:

<div>
  <div><label for="a">Input:</label></div>
  <input id="a" type="text" placeholder="CSS native fade out this placeholder text on click/focus" size="60">
</div>
<br>
<div>
  <div><label for="b">Textarea:</label></div>
  <textarea id="b" placeholder="CSS native fade out this placeholder text on click/focus" rows="3"></textarea>
</div>

Cách 3: Sử dụng CSS

input:focus::placeholder {
  color: transparent;
} // Cú pháp trên hỗ trợ hầu hết các trình duyệt

<input type="text" placeholder="Type something here!">

Tham khảo thêm câu hỏi trên Stackoverflow >>

Chúc các bạn thành công

nhantam
thiết kế web tại Panpic