JavaScript讓Textarea支持tab按鍵的方法
更新時間:2015年06月26日 15:24:54 作者:不吃皮蛋
這篇文章主要介紹了JavaScript讓Textarea支持tab按鍵的方法,涉及javascript針對textarea實現(xiàn)響應(yīng)tab按鍵的方法,需要的朋友可以參考下
本文實例講述了JavaScript讓Textarea支持tab按鍵的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
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);
}
}
}
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- JavaScript獲取并更改input標(biāo)簽name屬性的方法
- javascript實現(xiàn)依次輸入input自動定焦
- javascript使用正則控制input輸入框允許輸入的值方法大全
- input 日期選擇功能的javascript代碼
- JavaScript實現(xiàn)點擊自動選擇TextArea文本的方法
- 一個JavaScript處理textarea中的字符成每一行實例
- JavaScript判斷textarea值是否為空并給出相應(yīng)提示
- Javascript 文本框textarea高度隨內(nèi)容自適應(yīng)增長收縮
- JavaScript實現(xiàn)為input與textarea自定義hover,focus效果的方法
相關(guān)文章
from表單多個按鈕提交用onclick跳轉(zhuǎn)不同action
這篇文章主要介紹了from表單多個按鈕提交用onclick跳轉(zhuǎn)不同action,需要的朋友可以參考下2014-04-04
JavaScript中sharedWorker 實現(xiàn)多頁面通信的實例詳解
這篇文章主要介紹了JavaScript中sharedWorker 實現(xiàn)多頁面通信,通過給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-04-04

