Làm thế nào để có hình thức đầu vào tập trung với Bootstrap

Question

Tôi đang sử dụng Bootstrap 3.0.0 và tôi muốn sử dụng các hình thức đầu vào tập trung: See here, under Form States.. input focus

Tôi đã sử dụng <input class="form-control" id="focusedInput" type="text" value="This is focused..."> này để có được nó như tập trung, nhưng tôi không nhận được điều đó. Tài liệu cho biết sử dụng :focus để tập trung nhưng tôi không biết làm thế nào.

một số mã trong bootstrap.css

.form-control { 
    display: block; 
    width: 100%; 
    height: 34px; 
    padding: 6px 12px; 
    font-size: 14px; 
    line-height: 1.428571429; 
    color: #555555; 
    vertical-align: middle; 
    background-color: #ffffff; 
    border: 1px solid #cccccc; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
} 

.form-control :focus { 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
} 

Answer 1

Họ trình bày chỉ có một bản demo tập trung. Các kiểu dáng #focusedInput xuất phát từ docs.css và được sử dụng chỉ để ép buộc giao diện tập trung. Đó là không bao gồm trong gói Bootstrap, nhưng chỉ trong các trang tài liệu, như bạn có thể nhìn thấy trong buổi chụp màn hình sau đây (xem: docs.css:1072):

Sau đó, chúng ta phải tạo ra một lớp CSS mà sẽ có các kiểu được tập trung:

.focusedInput { 
    border-color: rgba(82,168,236,.8); 
    outline: 0; 
    outline: thin dotted \9; 
    -moz-box-shadow: 0 0 8px rgba(82,168,236,.6); 
    box-shadow: 0 0 8px rgba(82,168,236,.6) !important; 
} 

Hiện tại, chỉ có thể đặt kiểu tiêu điểm cho các phần tử không tập trung.

<input class="form-control focusedInput" type="text" value="This is focused..."> 

Xem bộ chọn JSFIDDLE

---

:focus được sử dụng để thiết lập các phong cách cho nhà nước tập trung đầu vào.

JSFIDDLE

For example:

#focusedInput:focus { 
    background: red; 
} 

này sẽ thiết lập nền đỏ khi bạn tập trung đầu vào.

Answer 2

Bạn có thể đạt được những gì bạn muốn bằng cách đặt thuộc tính tự động lấy nét bên trong thẻ đầu vào để tự động lấy nét. Đầu vào bàn phím sẽ được tập trung vào trường nhập và nó sẽ phát sáng.

<input class="form-control" id="focusedInput" type="text" autofocus="autofocus" value="This is focused..."> 

Answer 3

$("#inputID").focus(); // will bring focus 
$("#inputID").addClass("focusedInput"); // will give it the bootstrapped focus style 
scrollTo("#confirm_deletion"); // actually make browser go to that input 

/* scroll to the given element section of the page */ 
function scrollTo(element) 
{ 
    $('html, body').animate({scrollTop: $(element).offset().top-60}, 500); 
} 

Answer 4

Bạn chỉ cần thiết để loại bỏ các khoảng trống giữa: tập trung selector trên lớp .form kiểm soát.

.form-control:focus { 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
} 

JS FIDDLE

Answer 5

tôi đã cùng một vấn đề vì vậy tôi đã cố gắng để tìm kiếm trên css của bootstrap. tôi đã tải về một chủ đề của bootswatch và thay thế nó bằng bootstrap để có thể là vấn đề trong trường hợp của tôi. Nhưng dù sao tôi tìm thấy là form-control:focus có outline:0 có nghĩa là nó đã vô hiệu hóa hiệu ứng lấy nét. tôi xóa bỏ dòng đó và làm việc như một charm.Try nó nếu có ai có cùng một problem.Hope nó đã giúp.