如何解决如何处理textarea中的<tab>？
| 我想要一个文本区域，可以处理按Tab键的情况。 在默认情况下，如果您按Tab键，则焦点将离开文本区域。但是，当用户想要在文本区域中输入tab键时会怎样呢？ 我可以捕捉到此事件并将焦点返回到文本区域并将标签添加到当前光标位置吗？解决方法
您可以：http://jsfiddle.net/sdDVf/8/。
$(\"textarea\").keydown(function(e) {
if(e.keyCode === 9) { // tab was pressed
// get caret position/selection
var start = this.selectionStart;
var end = this.selectionEnd;
var $this = $(this);
var value = $this.val();
// set textarea value to: text before caret + tab + text after caret
$this.val(value.substring(0,start)
+ \"\\t\"
+ value.substring(end));
// put caret at right position again (add one for the tab)
this.selectionStart = this.selectionEnd = start + 1;
// prevent the focus lose
e.preventDefault();
}
});
document.querySelector(\"textarea\").addEventListener(\'keydown\',function(e) {
if(e.keyCode === 9) { // tab was pressed
// get caret position/selection
var start = this.selectionStart;
var end = this.selectionEnd;
var target = e.target;
var value = target.value;
// set textarea value to: text before caret + tab + text after caret
target.value = value.substring(0,start)
+ \"\\t\"
+ value.substring(end);
// put caret at right position again (add one for the tab)
this.selectionStart = this.selectionEnd = start + 1;
// prevent the focus lose
e.preventDefault();
}
},false);
(function($) {
$.fn.enableSmartTab = function() {
var $this;
$this = $(this);
$this.keydown(function(e) {
var after,before,end,lastNewLine,changeLength,re,replace,selection,start,val;
if ((e.charCode === 9 || e.keyCode === 9) && !e.altKey && !e.ctrlKey && !e.metaKey) {
e.preventDefault();
start = this.selectionStart;
end = this.selectionEnd;
val = $this.val();
before = val.substring(0,start);
after = val.substring(end);
replace = true;
if (start !== end) {
selection = val.substring(start,end);
if (~selection.indexOf(\'\\n\')) {
replace = false;
changeLength = 0;
lastNewLine = before.lastIndexOf(\'\\n\');
if (!~lastNewLine) {
selection = before + selection;
changeLength = before.length;
before = \'\';
} else {
selection = before.substring(lastNewLine) + selection;
changeLength = before.length - lastNewLine;
before = before.substring(0,lastNewLine);
}
if (e.shiftKey) {
re = /(\\n|^)(\\t|[ ]{1,8})/g;
if (selection.match(re)) {
start--;
changeLength--;
}
selection = selection.replace(re,\'$1\');
} else {
selection = selection.replace(/(\\n|^)/g,\'$1\\t\');
start++;
changeLength++;
}
$this.val(before + selection + after);
this.selectionStart = start;
this.selectionEnd = start + selection.length - changeLength;
}
}
if (replace && !e.shiftKey) {
$this.val(before + \'\\t\' + after);
this.selectionStart = this.selectionEnd = start + 1;
}
}
});
};
})(jQuery);
$(function() {
$(\"textarea\").enableSmartTab();
})<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<textarea rows=\"10\" cols=\"80\">
/* Just some code to edit with our new superTab */
(function($) {
$.fn.enableSmartTab = function() {
$this = $(this);
$this.keydown(function(e) {
if ((e.charCode === 9 || e.keyCode === 9) && !e.metaKey && !e.ctrlKey && !e.altKey) {
e.preventDefault();
}
}
}
}
</textarea> var textareas = document.getElementsByTagName(\'textarea\');
if ( textareas ) {
for ( var i = 0; i < textareas.length; i++ ) {
textareas[i].addEventListener( \'keydown\',function ( e ) {
if ( e.which != 9 ) return;
var start = this.selectionStart;
var end = this.selectionEnd;
this.value = this.value.substr( 0,start ) + \"\\t\" + this.value.substr( end );
this.selectionStart = this.selectionEnd = start + 1;
e.preventDefault();
return false;
});
}
}textarea {
border: 1px solid #cfcfcf;
width: 100%;
margin-left: 0px;
top: 0px;
bottom: 0px;
position: absolute;
}<textarea>
var x = 10;
var y = 10;
</textarea>
jQ(document).on(\'keydown\',\'textarea\',function(e) {
if (e.keyCode !== 9) return;
var Z;
var S = this.selectionStart;
var E = Z = this.selectionEnd;
var A = this.value.slice(S,E);
A = A.split(\'\\n\');
if (!e.shiftKey)
for (var x in A) {
A[x] = \'\\t\' + A[x];
Z++;
}
else
for (var x in A) {
if (A[x][0] == \'\\t\')
A[x] = A[x].substr(1);
Z--;
}
A = A.join(\'\\n\');
this.value = this.value.slice(0,S) + A + this.value.slice(E);
this.selectionStart = S != E ? S : Z;;
this.selectionEnd = Z;
e.preventDefault();
});
var textAreaArray = document.querySelectorAll(\"textarea\");
for (var i = textAreaArray.length-1; i >=0;i--){
textAreaArray[i].addEventListener(\'keydown\',function(e) {
if(e.keyCode === 9) { // tab was pressed
// get caret position/selection
var start = this.selectionStart;
var end = this.selectionEnd;
var target = e.target;
var value = target.value;
// set textarea value to: text before caret + tab + text after caret
target.value = value.substring(0,start)
+ \"\\t\"
+ value.substring(end);
// put caret at right position again (add one for the tab)
this.selectionStart = this.selectionEnd = start + 1;
// prevent the focus lose
e.preventDefault();
}
},false);
}<textarea rows=\"10\" cols=\"80\"></textarea>
<textarea rows=\"10\" cols=\"80\"></textarea>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。