文本框中的選項卡

Question

如何創建一個允許用戶輸入選項卡的文本框，並且在按下選項卡按鈕時不會將用戶發送到下一個元素？

Answer 1

您只需要檢查標籤onkeydown通過event.keyCode === 9。將字符插入到textarea中並不重要 - 爲'insertatcaret'使用庫或谷歌。

Answer 2

您可以使用JavaScript來捕捉Tab鍵按下事件並將其替換爲空格（我不確定是否將製表符插入到textarea中）。

E：This page看起來不錯。

Answer 3

onkeypress事件，的onkeyup或onkeydown事件檢查按下的鍵，如果是文本框選項卡，然後追加\ T和返回false，以便重點仍然是文本框 你很可能不得不使用textranges使標籤可以插入任何地方不在文本末尾 這是其餘的基本想法谷歌是你的朋友:)

Answer 4

已經有一些插件爲jQuery這樣做。例如一個是Tabby。

Answer 5

 
<textarea onkeydown="return catchTab(this, event);"> 

JS代碼：

 

function setSelectionRange(input, selectionStart, selectionEnd) { 
    if (input.setSelectionRange) { 
     input.focus(); 
     input.setSelectionRange(selectionStart, selectionEnd); 
    } 
    else if (input.createTextRange) { 
     var range = input.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', selectionEnd); 
     range.moveStart('character', selectionStart); 
     range.select(); 
    } 
} 

function replaceSelection (input, replaceString) { 
    if (input.setSelectionRange) { 
     var selectionStart = input.selectionStart; 
     var selectionEnd = input.selectionEnd; 
     input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd); 
     if (selectionStart != selectionEnd){ 
      setSelectionRange(input, selectionStart, selectionStart + replaceString.length); 
     } else{ 
      setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length); 
     } 
    } else if (document.selection) { 
     var range = document.selection.createRange(); 
     if (range.parentElement() == input) { 
      var isCollapsed = range.text == ''; 
      range.text = replaceString; 
      if (!isCollapsed) { 
       range.moveStart('character', -replaceString.length); 
       range.select(); 
      } 
     } 
    } 
} 

function catchTab(item,e){ 
    if(navigator.userAgent.match("Gecko")){ 
     c=e.which; 
    } else{ 
     c=e.keyCode; 
    } 
    if(c==9){ 
     replaceSelection(item, "\t"); 
     setTimeout(function() { item.focus() } , 0); 
     return false; 
    } 
} 
 

Answer 6

難道不力圖捕捉onkeypress事件事件的 'TAB' 鍵IE（它不工作） （bug 249）

嘗試onkeydown或onkeyup ins TEAD。