JavaScript讓Textarea支持tab按鍵的方法
本文實(shí)例講述了JavaScript讓Textarea支持tab按鍵的方法。分享給大家供大家參考。具體實(shí)現(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);
}
}
}
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- JavaScript獲取并更改input標(biāo)簽name屬性的方法
- javascript實(shí)現(xiàn)依次輸入input自動(dòng)定焦
- javascript使用正則控制input輸入框允許輸入的值方法大全
- input 日期選擇功能的javascript代碼
- JavaScript實(shí)現(xiàn)點(diǎn)擊自動(dòng)選擇TextArea文本的方法
- 一個(gè)JavaScript處理textarea中的字符成每一行實(shí)例
- JavaScript判斷textarea值是否為空并給出相應(yīng)提示
- Javascript 文本框textarea高度隨內(nèi)容自適應(yīng)增長(zhǎng)收縮
- JavaScript實(shí)現(xiàn)為input與textarea自定義hover,focus效果的方法
相關(guān)文章
跟我學(xué)習(xí)javascript的垃圾回收機(jī)制與內(nèi)存管理
跟我學(xué)習(xí)javascript的垃圾回收機(jī)制與內(nèi)存管理,感興趣的小伙伴們可以參考一下2015-11-11
javascript實(shí)現(xiàn)隨機(jī)顯示星星特效
這篇文章主要介紹了javascript實(shí)現(xiàn)隨機(jī)顯示星星特效的相關(guān)資料,以一個(gè)完整實(shí)例形式較為詳細(xì)的分析了js實(shí)現(xiàn)隨機(jī)顯示星星特效的實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-01-01
BootStrap 模態(tài)框?qū)崿F(xiàn)刷新網(wǎng)頁(yè)并關(guān)閉功能
這篇文章主要介紹了BootStrap 模態(tài)框?qū)崿F(xiàn)刷新網(wǎng)頁(yè)并關(guān)閉的功能,實(shí)現(xiàn)方法簡(jiǎn)單易懂,需要的朋友可以參考下2017-01-01
JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單加減購(gòu)物車效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
javascript實(shí)現(xiàn)可改變滾動(dòng)方向的無(wú)縫滾動(dòng)實(shí)例
無(wú)縫滾動(dòng)在制作一些圖片展示的時(shí)候還是蠻有用的,下面與大家分享下javascript實(shí)現(xiàn)的可改變滾動(dòng)方向的無(wú)縫滾動(dòng),具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06
JS實(shí)現(xiàn)多張圖片預(yù)覽同步上傳功能
這篇文章主要介紹了JS實(shí)現(xiàn)多張圖片預(yù)覽同步上傳功能的相關(guān)資料,需要的朋友可以參考下2017-06-06
js實(shí)現(xiàn)符合國(guó)情的日期插件詳解
本篇文章主要介紹了js實(shí)現(xiàn)符合國(guó)情的日期插件的方法與步驟。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01

