問題描述

我有一個簡單的 html textarea 在我身邊。現在,如果您點擊其中的標籤,它將進入下一個字段。我想讓 tab 按鈕縮進一些空格。我該怎麼做?謝謝。

最佳解決方案

從類似問題的其他答案中大量借出 (下面發佈)…

$(document).delegate('#textbox', 'keydown', function(e) {
  var keyCode = e.keyCode || e.which;

  if (keyCode == 9) {
    e.preventDefault();
    var start = $(this).get(0).selectionStart;
    var end = $(this).get(0).selectionEnd;

    // set textarea value to: text before caret + tab + text after caret
    $(this).val($(this).val().substring(0, start)
                + "t"
                + $(this).val().substring(end));

    // put caret at right position again
    $(this).get(0).selectionStart =
    $(this).get(0).selectionEnd = start + 1;
  }
});

jQuery: How to capture the TAB keypress within a Textbox

How to handle in textarea?

http://jsfiddle.net/jz6J5/

次佳解決方案

var textareas = document.getElementsByTagName('textarea');
var count = textareas.length;
for(var i=0;i<count;i++){
    textareas[i].onkeydown = function(e){
        if(e.keyCode==9 || e.which==9){
            e.preventDefault();
            var s = this.selectionStart;
            this.value = this.value.substring(0,this.selectionStart) + "t" + this.value.substring(this.selectionEnd);
            this.selectionEnd = s+1; 
        }
    }
}

此解決方案不需要 jQuery,並將啓用頁面上所有文本區域的標籤功能。

第三種解決方案

如其他人所寫,您可以使用 JavaScript 捕獲事件,防止默認操作 (以便光標不移動焦點) 並插入製表符。

但是,禁用默認行為使得無法使用鼠標將焦點移出文本區域。盲人用户使用鍵盤與網頁進行交互,沒有其他內容 – 他們無法看到鼠標指針進行任何有用的操作,因此它是鍵盤或無。標籤鍵是瀏覽文檔,特別是表單的主要方式。覆蓋 Tab 鍵的默認行為將使盲人不可能將焦點移動到下一個表單元素。

因此,如果您為廣泛的受眾羣體編寫了一個網站,我建議不要這樣做,而不會有任何令人信服的理由,併為盲人提供某種替代方案,而不會將其陷入文本區域。

第四種方案

對於什麼是值得的,這是我的 oneliner,你在這個主題中一直在談論什麼:



<textarea onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}">
</textarea>

最新版本的 Chrome,Firefox,Internet Explorer 和 Edge 的測試。

第五種方案

我在一個 AngularJS 環境中試圖使用 @ kasdega 的答案,我沒有任何地方,我沒有嘗試似乎能夠改變 Angular 的行為。所以如果這是對路人有用的,這裏是 @ kasdega 的代碼,AngularJS 風格的改寫,這對我有用:

app.directive('ngAllowTab', function () {
    return function (scope, element, attrs) {
        element.bind('keydown', function (event) {
            if (event.which == 9) {
                event.preventDefault();
                var start = this.selectionStart;
                var end = this.selectionEnd;
                element.val(element.val().substring(0, start) 
                    + 't' + element.val().substring(end));
                this.selectionStart = this.selectionEnd = start + 1;
                element.triggerHandler('change');
            }
        });
    };
});

和:

<textarea ng-model="mytext" ng-allow-tab></textarea>

第六種方案

您必須編寫 JS 代碼才能捕獲 TAB 鍵並插入一堆空格。與 JSFiddle 類似的東西。

檢查 jquery fiddle

HTML:

<textarea id="mybox">this is a test</textarea>

JavaScript 的:

$('#mybox').live('keydown', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    alert('tab pressed');
  } 
});
​

第七種方案

基於 @kasdega 解決方案的 Multiple-line indetation 腳本。

$('textarea').on('keydown', function (e) {
    var keyCode = e.keyCode || e.which;

    if (keyCode === 9) {
        e.preventDefault();
        var start = this.selectionStart;
        var end = this.selectionEnd;
        var val = this.value;
        var selected = val.substring(start, end);
        var re = /^/gm;
        var count = selected.match(re).length;


        this.value = val.substring(0, start) + selected.replace(re, 't') + val.substring(end);
        this.selectionStart = start;
        this.selectionEnd = end + count;
    }
});

第八種方案

該解決方案允許在整個選擇中標籤,如您的典型代碼編輯器,也可以取消選擇。但是,當沒有選擇時,我還沒有想出如何實現 shift-tab 。



$('#txtInput').on('keydown', function(ev) {
    var keyCode = ev.keyCode || ev.which;

    if (keyCode == 9) {
        ev.preventDefault();
        var start = this.selectionStart;
        var end = this.selectionEnd;
        var val = this.value;
        var selected = val.substring(start, end);
        var re, count;

        if(ev.shiftKey) {
            re = /^t/gm;
            count = -selected.match(re).length;
            this.value = val.substring(0, start) + selected.replace(re, '') + val.substring(end);
            // todo: add support for shift-tabbing without a selection
        } else {
            re = /^/gm;
            count = selected.match(re).length;
            this.value = val.substring(0, start) + selected.replace(re, 't') + val.substring(end);
        }

        if(start === end) {
            this.selectionStart = end + count;
        } else {
            this.selectionStart = start;
        }

        this.selectionEnd = end + count;
    }
});
#txtInput {
  font-family: monospace;
  width: 100%;
  box-sizing: border-box;
  height: 200px;
}
<script src="https://googleajax.admincdn.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<textarea id="txtInput">
$(document).ready(function(){
	$("#msgid").html("This is Hello World by JQuery");
});
</textarea>

第九種方案

基於所有人不得不在這裏回答的答案,它只是一個 keydown(而不是 keyup)+ preventDefault() +在插入符號插入一個標籤字符的組合。就像是:

var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
   e.preventDefault();
   insertAtCaret('txt', 't')
}

早期的答案有一個工作的 jsfiddle,但它使用一個 alert() 在鍵下。如果你刪除這個警報,那麼它沒有工作。我剛剛添加了一個函數來在 textarea 中的當前光標位置插入一個選項卡。

這是一個工作的 jsfiddle 相同:http://jsfiddle.net/nsHGZ/

參考文獻

注:本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意,可以加入我們改善翻譯效果:薇曉朵技術論壇