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

