7 đoạn mã Jquery hữu ích nên có cho lập trình website

Hôm nay, sharecodeweb sẽ giới thiệu tới các bạn một bài viết chia sẻ 7 đoạn jquery code snippets nên mang theo bên mình của mỗi lập trình viên khi làm website, có thể là nhập thêm vào sổ tay lập trình của các bạn.

Thêm tính năng in cho website

Khi thêm đoạn jquery này vào, thì bên dưới mỗi bài viết sẽ xuất hiện một nút print, để người dùng có thể in ngay bài viết trên website của bạn mà không cần phải sử dụng word

<!-- jQuery: Print Page -->
$('a.printPage').click(function(){
           window.print();
           return false;
}); 
<!-- HTML: Print Page -->
<div>
   <a  class="printPage" href="#">Print</a>
</div>

$('a.printPage').click(function(){

window.print();

return false;

});

<div>

<a class="printPage" href="#">Print</a>

</div>

Input Field/Swap Input Field

Đoạn jquery này sẽ giúp cho các ô textbox của bạn trông đẹp hơn, đó là đầu tiên ô textbox sẽ hiện một dòng chữ mặc định. Giống như ô search vậy, sau khi kích chuột vào ô textbox đó thì chữ search sẽ mất đi. Kiểu kiểu như vậy

<!-- jQuery: Helping Input Field -->
$('input[type=text]').focus(function(){    
           var $this = $(this);
           var title = $this.attr('title');
           if($this.val() == title)
           {
               $this.val('');
           }
}).blur(function() {
           var $this = $(this);
           var title = $this.attr('title');
           if($this.val() == '')
           {
               $this.val(title);
           }
});
<!-- HTML: Swap Input Field -->
<div>
       <input type="text" 
       name="searchCompanyName" 
       value="Company Name"
       title="Company Name" />
</div>

$('input[type=text]').focus(function(){

var $this = $(this);

var title = $this.attr('title');

if($this.val() == title)

{

$this.val('');

}

}).blur(function() {

var $this = $(this);

var title = $this.attr('title');

if($this.val() == '')

{

$this.val(title);

}

});

<div>

<input type="text"

name="searchCompanyName"

value="Company Name"

title="Company Name" />

</div>

Select/Deselect All options

Đoạn jquery dưới đây sẽ giúp bạn tạo 2 nút “chọn tất” và “hủy chọn tất”. 2 nút này đặc biệt hữu ích khi bạn làm việc với nhiều checkbox. Nó sẽ giúp user của bạn điều hướng tốt hơn trong việc sử dụng website của bạn.

<!-- jQuery: Select/Deselect All -->
$('.SelectAll').live('click', function(){
$(this).closest('.divAll').find('input[type=checkbox]').attr('checked', true);
return false; });
$('.DeselectAll').live('click', function(){
$(this).closest('.divAll').find('input[type=checkbox]').attr('checked', false);
return false; });
<!-- HTML: Select/Deselect All -->
<div class="divAll">  <a href="#" class="SelectAll">Select All</a>&nbsp;  
<a href="#" class="DeselectAll">Deselect All</a>  <br />  \
<input type="checkbox" id="Lahore" /><label for="Lahore">Lahore</label>  
<input type="checkbox" id="Karachi" /><label for="Karachi">Karachi</label>  
<input type="checkbox" id="Islamabad" /><label for="Islamabad">Islamabad</label> </div>

$('.SelectAll').live('click', function(){

$(this).closest('.divAll').find('input[type=checkbox]').attr('checked', true);

return false; });

$('.DeselectAll').live('click', function(){

$(this).closest('.divAll').find('input[type=checkbox]').attr('checked', false);

return false; });

<div class="divAll"> <a href="#" class="SelectAll">Select All</a> 

<a href="#" class="DeselectAll">Deselect All</a> <br /> \

<input type="checkbox" id="Lahore" /><label for="Lahore">Lahore</label>

<input type="checkbox" id="Karachi" /><label for="Karachi">Karachi</label>

<input type="checkbox" id="Islamabad" /><label for="Islamabad">Islamabad</label> </div>

Disbale Right Click

Một số lập trình viên muốn website của mình không thể nhấn chuột phải được, nhằm mục đích bảo vệ nội dung trên website. Khi đó chúng ta chỉ cần đoạn mã nhỏ sau đây

<!-- jQuery: Disabling Right Click -->
$(document).bind("contextmenu",function(e){
       e.preventDefault();

   });

$(document).bind("contextmenu",function(e){

e.preventDefault();

});

Kiểm tra ký tự phím khi nhấn

Đoạn code sau sẽ giúp lập trình viên kiểm tra được người dùng đã nhấn phím nào

<!-- jQuery: Which key is Pressed. -->
$('#txtFirstName').keypress(function(event){
     alert(event.keyCode);
  });
<!-- HTML: Which key is Pressed. -->
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>

$('#txtFirstName').keypress(function(event){

alert(event.keyCode);

});

<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>

Validate an Email

Việc kiểm tra định dạng email rất hay gặp trong lập trình website, và nhiều lập trình viên có vẻ vẫn lúng túng đối với thao tác này. Vậy thì hãy xem những đoạn code dưới đây để biết thêm một cách nhé.

<!-- jQuery: Validating an email. -->
$('#txtEmail').blur(function(e) {
            var sEmail = $('#txtEmail').val();
            if ($.trim(sEmail).length == 0) {
                alert('Please enter valid email address');
                e.preventDefault();
            }        
            var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]
                             {2,4}|[0-9]{1,3})(\]?)$/;        
            if (filter.test(sEmail)) {
                alert('Valid Email');
            }
            else {
                alert('Invalid Email');
                e.preventDefault();
            }
        });
<!-- HTML: Validating an email-->
<asp:TextBox id="txtEmail" runat="server" />

$('#txtEmail').blur(function(e) {

var sEmail = $('#txtEmail').val();

if ($.trim(sEmail).length == 0) {

alert('Please enter valid email address');

e.preventDefault();

}

var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]

{2,4}|[0-9]{1,3})(\]?)$/;

if (filter.test(sEmail)) {

alert('Valid Email');

}

else {

alert('Invalid Email');

e.preventDefault();

}

});

<asp:TextBox id="txtEmail" runat="server" />

Giới hạn số ký tự nhập vào textarea

<!-- jQuery: Limiting MaLength for TextArea -->
   var MaxLength = 500;
       $('#txtDescription').keypress(function(e)
       {
          if ($(this).val().length >= MaxLength) {
          e.preventDefault();}
       });
<!-- HTML: Limiting MaLength for TextArea-->
<asp:TextBox ID="txtDescription" runat="server"
                         TextMode="MultiLine" Columns="50" Rows="5"></asp:TextBox>

var MaxLength = 500;

$('#txtDescription').keypress(function(e)

{

if ($(this).val().length >= MaxLength) {

e.preventDefault();}

});

<asp:TextBox ID="txtDescription" runat="server"

TextMode="MultiLine" Columns="50" Rows="5"></asp:TextBox>

Hy vọng với bài viết chia sẻ 7 jquery Code snippets này sẽ giúp bạn xử lý nhanh hơn trong lập trình website nhé.

7 đoạn mã Jquery hữu ích nên có cho lập trình website

Thêm tính năng in cho website

Input Field/Swap Input Field

Select/Deselect All options

Disbale Right Click

Kiểm tra ký tự phím khi nhấn

Validate an Email

Giới hạn số ký tự nhập vào textarea

Like this:

Có liên quan

Nguyễn Trung Hiếu

Thêm tính năng in cho website

Input Field/Swap Input Field

Select/Deselect All options

Disbale Right Click

Kiểm tra ký tự phím khi nhấn

Validate an Email

Giới hạn số ký tự nhập vào textarea

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu