Xóa/thêm lớp CSS vào tiêu điểm/làm mờ đầu vào

Tôi có một biểu mẫu với một số trường nhập và một chút <div> ở bên phải của từng đầu vào với một mô tả nhỏ. Những gì tôi muốn là để kích hoạt một lớp CSS cho mỗi đầu vào của riêng <div> với mô tả riêng của nó.Xóa/thêm lớp CSS vào tiêu điểm/làm mờ đầu vào

Tôi đã tạo ví dụ làm việc tại đây: http://jsfiddle.net/VL2FH/8/. Điều này sử dụng <div>: trạng thái di chuột trên trạng thái lấy nét của đầu vào.

Những gì tôi muốn hỏi là: Có một số loại của một "shortcut" vì vậy tôi không cần phải thực hiện:

$('#submit_name').bind('blur', function(){ 
    $('#submit_name-desc').removeClass('input-desc-hover').addClass('input-desc'); 
}); 
$('#submit_name').bind('focus', function(){ 
    $('#submit_name-desc').removeClass('input-desc').addClass('input-desc-hover'); 
});

Đối với mỗi lĩnh vực đầu vào trong biểu mẫu.

Nguồn

2012-06-23 Morten Hagh

Như thế này http://jsfiddle.net/joycse06/VL2FH/11/ –

Chính xác như thế này! Điều này hoạt động hoàn toàn hoàn hảo! Bạn có thể trả lời được không? –

Ok, hãy trả lời. –

Bạn có thể khái quát các focus and blur gọi lại như thế này

$('input').on('blur', function(){ 
    $(this).next('div').removeClass('input-desc-hover').addClass('input-desc'); 
}).on('focus', function(){ 
    $(this).next('div').removeClass('input-desc').addClass('input-desc-hover'); 
});

Nếu mô tả của bạn divs là bên cạnh các yếu tố đầu vào, nó sẽ hoạt động tốt.

Và tốt hơn nên sử dụng .on() để ràng buộc sự kiện.

Demo:http://jsfiddle.net/joycse06/VL2FH/11/

Nguồn

2012-06-23 13:31:25

+1 cho giải pháp đơn giản.Tôi có xu hướng làm phức tạp hơn mọi thứ :) –

Cảm ơn bạn 1000 vì điều này :) Và giải pháp này tôi có thể sử dụng lại trên trang web nơi tôi có các biểu mẫu khác nhau với tên/id khác nhau, mà không cần điều chỉnh! –

@MiroslavPopovic, Cảm ơn Ngài. :) –

Sử dụng các lớp thay vì id để chọn yếu tố. Nếu các yếu tố đầu vào của bạn có submit-name lớp và mô tả của bạn desc lớp, bạn có thể làm điều đó như thế này:

$('.submit-name').bind('blur', function(){ 
    $("~ .desc", this).first().removeClass('input-desc-hover').addClass('input-desc'); 
}).bind('focus', function(){ 
    $("~ .desc", this).first().removeClass('input-desc').addClass('input-desc-hover'); 
});

$("~ .desc", this).first() sẽ chọn anh chị em đầu tiên của yếu tố đầu vào (this) với một lớp desc.

Dưới đây là một jsFiddle cập nhật cho rằng: http://jsfiddle.net/miroslav/VL2FH/13/

Sửa

Joy's solution với $(this).next() là tốt hơn nhiều mặc dù.

Nguồn

2012-06-23 13:22:53

Kiểm tra này chương trình ví dụ dưới đây

<html> 
     <head> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
      <script type="text/javascript"> 
       $(document).ready(function() 
       { 

        $('#submit_name').bind('blur', function() 
        { 
         $('#submit_name-desc').removeClass('cls1').addClass('cls2'); 
        }); 

        $('#submit_name').bind('focus', function() 
        { 
         $('#submit_name-desc').removeClass('cls2').addClass('cls1'); 
        }); 
       }); 
      </script> 

      <style> 
       .cls1 
       { 
        background-color: #ccc;     
       } 

       .cls2 
       { 
        background-color: #fff; 
       } 
       .submit_name-desc 
       { 
        height: 30px; 
        border: 1px; 
       } 
      </style> 
     </head> 
     <body> 
      <input type="text" id="submit_name" /> 
      <div id="submit_name-desc"> 
       Name Description 
      </div> 
     </body> 
    </html>

Nguồn

2012-06-23 13:32:20 Hearaman

Bạn cũng có thể đạt được hiệu quả tương tự trong CSS chỉ bằng cách sử dụng các anh chị em liền kề selector + để cho bất kỳ .input-desc trực tiếp sau đầu vào tập trung sẽ có các quy tắc khác nhau được áp dụng:

input:focus + .input-desc { 
    cursor: default; 
    width: 265px;  
    -moz-box-shadow: 0px 2px 5px #aaaaaa; 
    -webkit-box-shadow: 0px 2px 5px #aaaaaa; 
    box-shadow: 0px 2px 5px #aaaaaa; 
    animation:desc 0.3s; 
    -moz-animation:desc 0.3s; /* Firefox */ 
    -webkit-animation:desc 0.3s; /* Safari and Chrome */ 
}

Bộ chọn anh chị em liền kề là hỗ trợ trong các trình duyệt hiện đại và Internet Explorer từ phiên bản 8. (http://reference.sitepoint.com/css/adjacentsiblingselector)

Dưới đây là một fiddle: http://jsfiddle.net/VL2FH/14/

Nguồn

2012-06-23 22:54:04 jussinen

Xóa/thêm lớp CSS vào tiêu điểm/làm mờ đầu vào

Trả lời

Các vấn đề liên quan