This article mainly introduces how JavaScript enables Textarea to support the tab button, and how javascript responds to the tab button for textarea, for more information about how to use JavaScript to enable Textarea to support the tab button, see the following example. Share it with you for your reference. The specific implementation method is as follows:
HTMLTextAreaElement.prototype.getCaretPosition = function () {//return the caret position of the textarea return this.selectionStart;};HTMLTextAreaElement.prototype.setCaretPosition = function (position) {//change the caret position of the textarea this.selectionStart = position; this.selectionEnd = position; this.focus();};HTMLTextAreaElement.prototype.hasSelection = function () {//if the textarea has selection then return true if (this.selectionStart == this.selectionEnd) { return false; } else { return true; }};HTMLTextAreaElement.prototype.getSelectedText = function () {//return the selection text return this.value.substring(this.selectionStart, this.selectionEnd);};HTMLTextAreaElement.prototype.setSelection = function (start, end) {//change the selection area of the textarea this.selectionStart = start; this.selectionEnd = end; this.focus();};var textarea = document.getElementsByTagName('textarea')[0]; textarea.onkeydown = function(event) { //support tab on textarea if (event.keyCode == 9) { //tab was pressed var newCaretPosition; newCaretPosition = textarea.getCaretPosition() + " ".length; textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length); textarea.setCaretPosition(newCaretPosition); return false; } if(event.keyCode == 8){ //backspace if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space var newCaretPosition; newCaretPosition = textarea.getCaretPosition() - 3; textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length); textarea.setCaretPosition(newCaretPosition); } } if(event.keyCode == 37){ //left arrow var newCaretPosition; if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") { //it's a tab space newCaretPosition = textarea.getCaretPosition() - 3; textarea.setCaretPosition(newCaretPosition); } } if(event.keyCode == 39){ //right arrow var newCaretPosition; if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") { //it's a tab space newCaretPosition = textarea.getCaretPosition() + 3; textarea.setCaretPosition(newCaretPosition); } } }
I hope this article will help you design javascript programs.