Chụp khóa TAB trong hộp văn bản [đã đóng]

100

Tôi muốn có thể sử dụng Tabkhóa trong một hộp văn bản để gắn thẻ trên bốn khoảng trắng. Hiện tại, phím Tab sẽ chuyển con trỏ của tôi đến đầu vào tiếp theo.

Có một số JavaScript sẽ nắm bắt phím Tab trong hộp văn bản trước khi nó xuất hiện trên giao diện người dùng không?

Tôi hiểu một số trình duyệt (tức là FireFox) có thể không cho phép điều này. Còn về một tổ hợp phím tùy chỉnh như Shift+ Tabhoặc Ctrl+ Qthì sao?

javascript user-interface

— Seibar
nguồn

Đừng quên kiểm tra cửa sổ được lấy nét và để nó bong bóng bình thường nếu bạn không ở trong vùng văn bản của trình soạn thảo.

— FlySwat

Bài đăng này đã được người kiểm duyệt gắn cờ là "thuộc về meta.stackoverflow.com", nhưng nó đã được hơn hai năm, vì vậy tôi sẽ không di chuyển nó.

— Robert Harvey

108

Ngay cả khi bạn nắm bắt keydown/ keyupsự kiện, đó là những sự kiện duy nhất mà phím tab kích hoạt, bạn vẫn cần một số cách để ngăn hành động mặc định, chuyển sang mục tiếp theo trong thứ tự tab, xảy ra.

Trong Firefox, bạn có thể gọi preventDefault()phương thức trên đối tượng sự kiện được chuyển tới trình xử lý sự kiện của bạn. Trong IE, bạn phải trả về false từ xử lý sự kiện. Thư viện JQuery cung cấp một preventDefaultphương thức trên đối tượng sự kiện của nó hoạt động trong IE và FF.

<body>
<input type="text" id="myInput">
<script type="text/javascript">
    var myInput = document.getElementById("myInput");
    if(myInput.addEventListener ) {
        myInput.addEventListener('keydown',this.keyHandler,false);
    } else if(myInput.attachEvent ) {
        myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
    }

    function keyHandler(e) {
        var TABKEY = 9;
        if(e.keyCode == TABKEY) {
            this.value += "    ";
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
</script>
</body>

— ScottKoon
nguồn

1

Tôi vừa sửa dòng 4, từ "if (el.attachEvent)" thành "if (myInput.attachEvent)"

— Fenton

Lưu ý rằng mã này chỉ thêm TAB ở cuối. Nó bất tiện trong hầu hết các trường hợp.

— Alexander Palamarchuk

@SteveFenton Có cách đơn giản nào để xóa lại khoảng trắng không keycode 8?

— yckart

18

Tôi muốn thụt lề tab không hoạt động hơn là ngắt việc phân chia tab giữa các mục biểu mẫu.

Nếu bạn muốn thụt lề để đưa mã vào hộp Markdown, hãy sử dụng Ctrl+ K(hoặc ⌘K trên máy Mac).

Về mặt thực sự dừng hành động, jQuery (mà Stack Overflow sử dụng) sẽ ngăn một sự kiện nổi bọt khi bạn trả về false từ một lệnh gọi lại sự kiện. Điều này làm cho việc làm việc với nhiều trình duyệt trở nên dễ dàng hơn.

— Lauren
nguồn

13

Câu trả lời trước là ổn, nhưng tôi là một trong những người kiên quyết chống lại việc trộn lẫn hành vi với bản trình bày (đưa JavaScript vào HTML của tôi) vì vậy tôi thích đặt logic xử lý sự kiện của mình trong các tệp JavaScript của mình. Ngoài ra, không phải tất cả các trình duyệt đều triển khai sự kiện (hoặc e) theo cùng một cách. Bạn có thể muốn kiểm tra trước khi chạy bất kỳ logic nào:

document.onkeydown = TabExample;

function TabExample(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var tabKey = 9;
  if(evt.keyCode == tabKey) {
    // do work
  }
}

— Tom
nguồn

6

Tôi khuyên bạn không nên thay đổi hành vi mặc định của khóa. Tôi làm hết sức có thể mà không cần chạm vào chuột, vì vậy nếu bạn làm cho phím tab của tôi không di chuyển đến trường tiếp theo trên một biểu mẫu, tôi sẽ rất trầm trọng.

Tuy nhiên, một phím tắt có thể hữu ích, đặc biệt với các khối mã lớn và lồng vào nhau. Shift-TAB là một lựa chọn không tồi vì điều đó thường đưa tôi đến trường trước đó trên một biểu mẫu. Có thể có một nút mới trên trình soạn thảo WMD để chèn mã-TAB, với một phím tắt, có thể thực hiện được không?

— Wally vô luật
nguồn

1

Câu hỏi hoàn toàn phụ thuộc vào ứng dụng. Tôi đang làm việc trên một điều khiển trình soạn thảo mã. Tôi không cung cấp khóa tab và tất cả học sinh của tôi đều phàn nàn. Tôi không làm vậy vì tôi không muốn phá vỡ khả năng tiếp cận cho một học sinh bị mù của mình. Bây giờ tôi đã thêm hỗ trợ tab, nhưng cũng cung cấp tùy chọn tùy chọn người dùng để tắt nó.

— Charles

@Charles điểm rất tốt về ý nghĩa khả năng tiếp cận.

— Wally Lawless

4

có một vấn đề trong câu trả lời hay nhất do ScottKoon đưa ra

nó đây rồi

} else if(el.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

Nên là

} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

Do đó, nó không hoạt động trong IE. Hy vọng rằng ScottKoon sẽ cập nhật mã

— chintan123
nguồn

3

Trong Chrome trên Mac, tab alt sẽ chèn một ký tự tab vào một <textarea>trường.

Đây là một:. Wee!

— Paul D. Waite
nguồn