Breaking

Thursday, September 5, 2013

HTML - Hiển thị chú thích giữ chỗ trong input text


Hồi mới đầu "vọc" web tôi không biết làm thế nào để hiện dòng chữ chú thích như "Nhập vào đây ..." mà mỗi khi click chuột vào đó thì chữ biến mất dành chỗ cho chúng ta gõ từ mới.
Tôi view source thấy có tý ứng dụng đó mà họ cũng cho nhiều dòng js. Rồi tôi lên các forum hỏi cũng không nhận được sự trả lời ưng ý. Cuối cùng sau thời gian tự học web căn bản đi từ HTML mà lên cuối cùng tôi thấy hóa ra những vấn đề tưởng phức tạp lại giả quyết rất đơn giản nếu chúng ta nắm chắc kiến thức cơ bản.

Hôm nay tôi giới thiệu 2 kiểu code cho chúng ta hiệu ứng này, nhưng tôi vẫn khuyên bạn nếu làm web thì nên học thật chắc kiến thức cơ bản, để đừng phức tạp hóa vấn đề. Tôi biết có nhiều bạn trẻ, làm blog cũng khá đẹp và cũng có thể nói là sớm có sản phẩm & kinh nghiệm. Nhưng các bạn ấy, làm web theo kiểu ngọn, sử dụng khá tốt mã nguồn mở, biết ứng dụng hoặc module cho web và tất nhiên xây nhà cũng rất nhanh. Tuy nhiên lệ thuộc quá nhiều vào mã nguồn, các ứng dụng được viết sẵn, đụng tý là đi tìm ứng dụng thay vì nhận ra rằng vấn đề đó có thể giải quyết theo hướng nào.

Bạn nên biết rằng hầu hết các tiện ích không liên quan đến cơ sở dữ liệu, tức là không cần phải lưu thông tin gì lên database website hoặc không liên quan đến "cân đo đong đếm" bài viết, những tiện ích ấy hầu hết viết bằng HTML + CSS + JAVASCRIPT. Đây là ngôn ngữ cơ bản trong các website, nó hoạt động trên bất kỳ website nào, bạn đừng bận tâm đến các mã nguồn. Mà nên chăng hiểu nó và ứng dụng nó vào các mục đích khác nhau.

Để ứng dụng hiệu ứng này có 2 cách chính:
Cách 1: Thêm thuộc tính sự kiện vào input text
<input type="text" onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' value='Nhập từ cần tìm vào đây'/>
Ví dụ:


Cách 2: Thêm placeholder vào input text với HTML5
<input type="text" value=""  placeholder="Nhập từ cần tìm vào đây"/><br/>
Ví dụ:

No comments:

Post a Comment