Thay đổi Focus style của Form với Jquery và Css

Changing Form Input Styles on Focus with jQuery + CSS
Thông thường khi Focus (chọn) một textbox, button ... trong một form thì viền đổi màu chẳng hạn. Thay đổi như thế nào là phụ thuộc vào từng Browser (trình duyệt), bạn đã từng duyệt web bằng Safari sẽ thấy được sự khác biệt đó. Nhưng với sự ra đời của CSS3 và jQuery thì bạn có thể làm tất cả.



Với bài chia sẻ này, giao diện form của bạn sẽ mượt mà và hấp dẫn hơn nhiều. Hãy xem demo sau thực sự thấy sự khác biệt đó (không hỗ trợ IE): Demo focus style.

Đầu tiên chúng ta sẽ tạo ra một ra một form với hai input control dạng text.
HTML:

<form> 
  <input name="status" id="status" value="Type something here" type="text"/> <br><br>
  <input name="status" id="status" value="Type something here" type="text"/> 
</form>

"Type something here" sẽ là giá trị hiển thị mặc định của textbox. Khi ta focus vào textbox thì chúng sẽ bị xóa trống. Điều này sẽ được đề cập cụ thể.

Bây giờ, ta sẽ làm cho các textbox thân thiện hơn bằng cách sử dụng css cho cả mặc định (idleField) và lúc focus (focusField).
CSS:

#status{
     width:50%;
     padding:10px;
     height:32px;
     outline:none;
}
.idleField{
  font: normal normal normal 14px/14px Arial, sans-serif;
  border: 1px solid #BFC3C7;
  background-color: #F5F6F9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f6f9), to(#f9fbfd));
  background-image: -webkit-linear-gradient(top, #f5f6f9, #f9fbfd);
  background-image: -moz-linear-gradient(top, #f5f6f9, #f9fbfd);
  background-image: -ms-linear-gradient(top, #f5f6f9, #f9fbfd);
  background-image: -o-linear-gradient(top, #f5f6f9, #f9fbfd);
  background-image: linear-gradient(top, #f5f6f9, #f9fbfd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f9', EndColorStr='#f9fbfd');
  -moz-box-shadow: 0px 1px 0px white;
  -webkit-box-shadow: 0px 1px 0px white;
  box-shadow: 0px 1px 0px white;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  color:#CCC;
}  
.focusField{
     border:solid 1px blue;
     background: white;
     color: black;
     -moz-box-shadow: 0px 0px 15px rgba(0, 148, 255, 0.7);
     -webkit-box-shadow: 0px 0px 15px rgba(0, 148, 255, 0.7);
     box-shadow: 0px 0px 15px rgba(0, 148, 255, 0.7);
    }

Cuối cùng tại đây ta sẽ thêm hiệu ứng cho sự kiện Focus trên textbox thông qua đoạn jQuery sau:
jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('input[type="text"]').addClass("idleField");
 $('input[type="text"]').focus(function() {
  $(this).removeClass("idleField").addClass("focusField");
        if (this.value == this.defaultValue){
         this.value = '';
     }
        if(this.value != this.defaultValue){
      this.select();
        }
    });
    $('input[type="text"]').blur(function() {
     $(this).removeClass("focusField").addClass("idleField");
        if ($.trim(this.value == '')){
         this.value = (this.defaultValue ? this.defaultValue : '');
     }
    });
});
</script>

Vậy là đã hoàn tất! S sẽ giải thích sơ một chút đoạn jQuery trên để các bạn có thể chủ động hơn trong việc sử dụng nó. Trước tiên là tự động gán cho các input[type="text"] lớp idleField

$('input[type="text"]').addClass("idleField");

Và đây là đoạn xử lý sự kiện focus. Tại đây khi focus() được gọi nó sẽ xóa lớp idleField và thay vào đó là lớp focusField cho các textbox

$('input[type="text"]').focus(function() {
$(this).removeClass("idleField").addClass("focusField");

Còn đây nó sẽ làm nhiệm vụ xóa sạch giá trị mặc định trong textbox mà s đã đề cập ở trên

if (this.value == this.defaultValue){
         this.value = '';
     }
        if(this.value != this.defaultValue){
      this.select();
        }

Đoạn còn lại là những gì sẽ được thực hiện khi ta không còn focus. Hãy thử ngay nào!!!

SHARE