Cách không làm mất tập trung vào trang đăng nhập

Tôi có biểu mẫu đăng nhập đơn giản với 2 trường nhập: "tên người dùng" và "mật khẩu". Trường "tên người dùng" được tập trung theo mặc định. Vấn đề là khi người dùng nhấp vào bên ngoài trường "tên người dùng" hoặc "mật khẩu", tiêu điểm đã biến mất (nó không nằm trong "tên người dùng" cũng như trên các trường "mật khẩu" "). Làm cách nào để tập trung vào 2 trường này ? chỉCách không làm mất tập trung vào trang đăng nhập

Trong trường hợp của tôi, đây là một hành vi thực sự gây phiền nhiễu, vì vậy tôi thực sự muốn làm điều này :)

tôi có thể làm điều gì đó như:

$("*").focus(function() { 
    if (!$(this).hasClass("my_inputs_class")) { 
     // How to stop the focusing process here ? 
    } 
});

Nguồn

2010-06-10 Misha Moroshko

+22

Eugh này. Xin đừng cố gắng làm điều này. Nếu người dùng muốn tập trung ở một nơi khác, hãy để họ có nó ở một nơi khác. – Quentin

Có lẽ hành vi tập trung rất khó chịu này là điều mà bạn được yêu cầu làm, vì vậy bạn có ít năng lực để làm khác, nhưng nghĩ rằng: liệu nó có thực sự đáng giá không? Nó khá hữu ích? Ngay cả cần thiết? – Humberto

@Misha: Chào mừng bạn đến với lập trình ứng dụng web! –

Có vẻ như bạn luôn là muốn một trong các yếu tố đầu vào của bạn phải được tập trung, đủ công bằng. Cách tôi sẽ làm điều này là để ràng buộc mỗi đầu vào của bạn blur() sự kiện để nếu nó xảy ra, nó đi đến phần tử tiếp theo.

Dưới đây là đánh dấu:

<body> 
<form method="POST" action="."> 
    <input type="text" name="username" /> 
    <input type="password" name="password" /> 
    <input type="submit" name="submit" /> 
</form> 
</body>

Và đây là jQuery:

$(document).ready(function() { 
    // what are the named fields the user may focus on? 
    var allowed = ['username', 'password', 'submit']; 
    $.each(allowed, function(i, val) { 
     var next = (i + 1) % allowed.length; 
     $('input[name='+val+']').bind('blur', function(){ 
      $('input[name='+allowed[next]+']').focus(); 
     }); 
    }); 
    $('input[name='+allowed[0]+']').focus(); 
});

Nguồn

2010-06-16 16:43:07 artlung

+1 cho khái niệm, nhưng ví dụ jQuery có thể hơi phức tạp hơn một chút. - Mã jQuery nhẹ hơn một chút tại http://www.jsfiddle.net/bKuUV/2/ – gnarf

Ngoài ra, việc đặt tên/đặt ID của '' thành 'submit' có thể gây ra các vấn đề với jQuery' .submit() ' chức năng. http://dev.jquery.com/ticket/6264 – gnarf

Tôi không đặt 'id' của' đầu vào' để gửi, vì vậy vé không liên quan. Ví dụ của tôi không sử dụng 'id' ở tất cả, tôi chỉ không thấy làm thế nào họ cần thiết để trả lời câu hỏi. Tôi thích bạn sử dụng 'next()' mặc dù. Ngoài ra, tôi không sử dụng 'first()' rất nhiều nhưng tôi cũng thích điều đó. – artlung

Bạn có thể sử dụng javascript để đặt trọng tâm vào tiêu điểm, nhưng bạn thực sự shoudn't. Buộc tập trung vào các trường đó sẽ phá vỡ sự tương tác bình thường của trang. Điều đó có nghĩa là người dùng không thể làm điều gì đơn giản như việc nhấp vào liên kết trên trang, bởi vì tiêu điểm sẽ luôn ở trên các đầu vào đó.

Xin đừng làm điều đó :)

Nguồn

2010-06-10 14:16:23

hãy xem câu hỏi cập nhật của tôi –

Nếu bạn thực sự thực sự muốn làm điều này (và bạn không nên) sử dụng delegate() thay vì thiết lập một xử lý sự kiện riêng biệt trên mỗi phần tử HTML duy nhất:

$('body').delegate('*', 'focus', function() { 
    if (!$(this).hasClass("my_inputs_class")) { 
    $('#username').focus(); 
    return false; 
    } 
});

Nhưng xem xét rằng điều này sẽ làm cho unacessible tất cả các yếu tố ngoại trừ hai trường đầu vào thông qua bàn phím điều hướng (bao gồm cả nút gửi, bất kỳ liên kết trên trang, vv)

Nguồn

2010-06-13 15:14:20 Tgr

Đặt blur xử lý sự kiện để nó mang lại tập trung vào một đầu vào của bạn.

Nguồn

2010-06-13 16:54:54 Thevs

Bạn có thể làm như thế này (trong mã giả):

if user || pass blured 
    if user.len > 0 
     pass.setFocus 
    else 
     user.setFocus

Hy vọng bạn sẽ có được nó.

Nguồn

2010-06-14 10:16:00 hellozimi

Nó không đủ tốt vì nếu người dùng nhập tên người dùng và mật khẩu, và sau đó anh ấy muốn thay đổi tên người dùng, anh ấy không thể vì tiêu điểm sẽ nằm trên mật khẩu. –

Cài đặt trình xử lý onClick trên thành phần body (hoặc div bao gồm hầu hết trang). Nhấp vào div sau đó đặt trọng tâm vào trường tên người dùng/mật khẩu.

Tôi cũng đề nghị để ràng buộc Return trong "Tên truy nhập" thành "Đặt tập trung vào mật khẩu" và Return trong "mật khẩu" để "Gửi biểu mẫu".

Nguồn

2010-06-15 11:26:29

Bạn có thể kích hoạt các nhấp chuột trên các liên kết bằng cách tái tập trung vào bạn đóng góp sau một khoảng thời gian tối thiểu.

Mỗi lần đối tượng lấy tiêu điểm bạn kiểm tra nếu nó có lớp được yêu cầu: nếu không đặt tiêu điểm cho đầu tiên của biểu mẫu đầu vào; theo cách này:

<html> 
<head> 
<title>Example</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" /> 
    <script type="text/javascript" > 
    $(function() { 
    $('*').focus(function() { var obj = this; setTimeout(function() {checkFocus(obj)}, 1)}); 
    }) 

    function checkFocus(obj) { 
     if (!$(obj).hasClass('force_focus')){ 
      $('input.force_focus:first').focus() 
     } 
    } 
    </script> 
</head> 
<body> 
    <a href="http://www.google.com">Extrnal link</a> 
    <form><div> 
User: <input type="text" name="user" class="force_focus"/><br/> 
Password: <input type="password" name="password" class="force_focus"/><br/> 
Other: <input type="text" name="other" class=""/><br/> 
<input type="submit" name="submit" value="Login" /> 
</div></form> 
</body> 
</html>

Nguồn

2010-06-16 17:33:10 Iacopo

đây chỉ là một ý tưởng, bạn có thể sử dụng một hàm setInterval để đặt trọng tâm trong lĩnh vực tên truy cập, và bạn có thể ngắt nó khi bạn muốn với chức năng clearInterval.

var A = setInterval(function(){ $('#username').focus();}, 100);

... và cho interrumpt nó, bạn có thể làm điều gì đó như

$('#password').focus(function(){ clearInterval(A);});

Nguồn

2010-06-17 02:14:40 eos87

Cách không làm mất tập trung vào trang đăng nhập

Trả lời

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