Hướng dẫn chèn Gợi Ý Và Auto Focus Form Fields Với jQuery

Xem: 1254    Tải: 5   Thảo luận: 0   Mục: Javascript   Lĩnh vực: Khác

0 điểm   ( 5 đánh giá ) File đã được kiểm thử

1 MEGA [megacode]huong-dan-chen-goi-y-va-auto-focus.rar (5.46 KB)
Phí tải ~ 2,000 đ
Live Demo

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-chen-goi-y-va-auto-focus.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Việc chèn các câu gợi ý vào các fileds trong form sẽ giúp người dùng dễ dàng nhận biết họ cần phải nhập cái gì trong filed đó. Còn Auto focus sẽ tự động giúp người dùng nên cần nhập cái gì đầu tiên. Đây là 2 chức năng cơ bản mà hầu như mọi website đều dùng cho những mẫu form có trong website của mình. Để dễ hình dung hơn về 2 chức năng này, các bạn có thể xem demo bên dưới.

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

Việc chèn các câu gợi ý vào các fileds trong form sẽ giúp người dùng dễ dàng nhận biết họ cần phải nhập cái gì trong filed đó. Còn Auto focus sẽ tự động giúp người dùng nên cần nhập cái gì đầu tiên. Đây là 2 chức năng cơ bản mà hầu như mọi website đều dùng cho những mẫu form có trong website của mình. Để dễ hình dung hơn về 2 chức năng này, các bạn có thể xem demo bên dưới.

HTML

Đầu tiên, chúng ta sẽ cần một form với các filed sẽ có title dùng cho việc gợi ý như sau :

</pre>
<form class="sample-form" action="#">
 <label for="fullname">Full Name <em>(auto focused field)</em>:</label>
 
 <input class="auto-focus" id="fullname" type="text" name="fullname" />
 
 <label for="email">Email Address:</label>
 
 <input class="auto-hint" id="email" title="i.e. me@example.com" type="text" name="email" />
 
 <label for="phone">Phone Number:</label>
 
 <input class="auto-hint" id="phone" title="(123) 123-1234" type="text" name="phone" />
 
 <label for="message">Message:</label>
 
 <textarea class="auto-hint" id="message" title="Enter Your Message Here..."
cols="70" name="message" rows="7"></textarea>
 
 <button type="submit">Submit</button> </form>
<pre>

jQuery

Để có thể biến những thuộc tính title có trong các filed có thể hiển thị trong các form, chúng ta sẽ sử dụng đoạn jQuery sau :

$(document).ready(function(){
        //  Focus auto-focus fields
        $('.auto-focus:first').focus();
 
        //  Initialize auto-hint fields
        $('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
            if($(this).val() == $(this).attr('title')){
                $(this).val('');
                $(this).removeClass('auto-hint');
            }
        });
 
        $('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
            if($(this).val() == '' && $(this).attr('title') != ''){
                $(this).val($(this).attr('title'));
                $(this).addClass('auto-hint');
            }
        });
 
        $('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
            if($(this).attr('title') == ''){ return; }
            if($(this).val() == ''){ $(this).val($(this).attr('title')); }
            else { $(this).removeClass('auto-hint'); }
        });
 });

Mình hy vọng với bài viết đơn giản này, các bạn sẽ có thêm kinh nghiệm sử dụng jQuery cũng như có thêm một chức năng cơ bản cho những mẫu form có trong website của mình.

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

Tags: form, jQuery

Hướng dẫn chèn Gợi Ý Và Auto Focus Form Fields Với jQuery

Hướng dẫn chèn Gợi Ý Và Auto Focus Form Fields Với jQuery Đăng ngày 21-08-2014  Việc chèn các câu gợi ý vào các fileds trong form sẽ giúp người dùng dễ dàng nhận biết họ cần phải nhập cái gì trong filed đó. Còn Auto focus sẽ tự động giúp người dùng nên cần nhập cái gì đầu tiên. Đây là 2 chức năng cơ bản mà hầu như mọi website đều dùng cho những mẫu form có trong website của mình. Để dễ hình dung hơn về 2 chức năng này, các bạn có thể xem demo bên dưới. 5/10 1254

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn