問題描述
我有一個簡單的 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
次佳解決方案
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 輔助翻譯的英文資料結果。如果您對結果不滿意,可以加入我們改善翻譯效果:薇曉朵技術論壇。