2008-08-06 48 views
74

Tôi muốn có thể sử dụng phím Tab trong hộp văn bản để tab qua bốn dấu cách. Hiện tại, phím Tab chuyển con trỏ của tôi sang đầu vào tiếp theo.Chụp phím TAB trong hộp văn bản

Có một số JavaScript sẽ chụp phím Tab trong hộp văn bản trước khi nó phát tán đến giao diện người dùng không?

Tôi hiểu một số trình duyệt (ví dụ: FireFox) có thể không cho phép điều này. Cách tổ hợp phím tùy chỉnh như Shift + Tab hoặc Ctrl + Q?

+0

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

+0

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

Trả lời

83

Ngay cả khi bạn nắm bắt sự kiện keydown/keyup, đó 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 tác vụ mặc định, chuyển sang mục tiếp theo trong thứ tự tab.

Trong Firefox, bạn có thể gọi phương thức preventDefault() trên đối tượng sự kiện được chuyển đến 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 phương thức preventDefault 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> 
+1

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

+0

Chú ý mã này chỉ thêm TAB vào cuối. Đó là bất tiện trong hầu hết các dịp. –

+0

@SteveFenton Có cách nào đơn giản để loại bỏ các khoảng trống một lần nữa bằng 'keycode'' 8'? – yckart

9

Câu trả lời trước là tốt, nhưng tôi là một trong những kẻ kiên quyết chống lại hành vi trộn với bản trình bày (đặt JavaScript trong HTML của tôi) vì vậy tôi thích đặt logic xử lý sự kiện vào 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ỳ lôgic nào:

document.onkeydown = TabExample; 

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

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

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

Trong điều kiện thực sự dừng hành động, jQuery (sử dụng Stack Overflow) sẽ ngăn sự kiện phát ra khi bạn trả về false từ một cuộc gọi lại sự kiện. Điều này giúp cuộc sống dễ dàng hơn khi làm việc với nhiều trình duyệt.

4

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 càng nhiều càng tốt 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 chuyển sang trường tiếp theo trên biểu mẫu, tôi sẽ rất trầm trọng hơn.

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

+0

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 một khóa tab và tất cả học sinh của tôi đều phàn nàn. Tôi không phải vì tôi không muốn phá vỡ khả năng tiếp cận cho một học sinh của tôi bị mù. Tôi hiện đã 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 tính năng này. – Charles

+0

@Chia sẻ điểm rất tốt về các tác động trợ năng. –

1

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

Dưới đây là một:. Wee!

3

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

ở đây là nó

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

Nên

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

Do đó nó đã không làm việc trong IE. Hy vọng rằng ScottKoon sẽ cập nhật mã

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