專注於原型JavaScript庫中的標籤後的文本區域

我想使文本區域選項卡感知和作爲它的一部分我寫了下面的JavaScript。我正在使用原型js庫，專注於原型JavaScript庫中的標籤後的文本區域

document.observe("dom:loaded", function(){ 
    $('tabawaretextarea').observe('keydown',function(e) { 
      if(e.keyCode === 9) { // tab was pressed 
      $('tabawaretextarea').value = $F('tabawaretextarea')+"\t"; 
          $('tabawaretextarea').focus(); 
      return false; 
     } 
    }) 
});

正如預期的那樣，標籤會在最後被追加。但是，我的文本區域失去了重點，文本區域旁邊的HTML元素越來越集中。我相信回報錯誤應該做到這一點，但事實並非如此。

除此之外，我還嘗試將所有元素tabindex設置爲-1，一些文章說我必須使用「autoTab」類並設置maxlength以供選項卡工作 - 我試過這樣做，因爲我使用的是基於彈簧的<form:textarea/>屬性maxlength不允許（甚至在文本區域中不允許maxlength）。

有什麼建議嗎？

來源

2011-11-08 Abhishek

僅供參考，在Windows中可以通過數字鍵盤按Alt + 9輸入製表符爲Unicode。在linux上，它是一個不雅的按Ctrl + Alt + Shift +（U，9）。對於普通人來說這沒有用，我寧願按照自己的方式去做。 – clockworkgeek

return false;在原型事件處理程序中沒有做任何事情。要禁止默認操作，請使用Event.stop()。此外，你需要做的按鍵，不KEYDOWN：

document.observe("dom:loaded", function(){ 
    $('tabawaretextarea').observe('keypress',function(e) { 
     if(e.keyCode === 9) { // tab was pressed 
      $('tabawaretextarea').value += "\t"; 
      e.stop(); 
     } 
    }); 
});

注：該作品在FF但這不會在Chrome工作，據我所知是沒有解決辦法。我沒有測試IE，Opera或Safari。

編輯：'keydown'確實可以工作，並且可以在Chrome和FF中使用。同樣，其他瀏覽器沒有測試過，但這裏是解決方案：

document.observe("dom:loaded", function(){ 
    $('tabawaretextarea').observe('keydown',function(e) { 
     if(e.keyCode === 9) { // tab was pressed 
      $('tabawaretextarea').value += "\t"; 
      e.stop(); 
      // note that we don't need to focus() the element as it hasn't lost focus 
     } 
    }); 
});

See it on jsFiddle

來源

2011-11-08 12:29:07 megaflop

專注於原型JavaScript庫中的標籤後的文本區域

回答

相關問題