JavaScript让Textarea支持tab按键的方法
作者:不吃皮蛋 时间:2024-05-05 09:15:00
本文实例讲述了JavaScript让Textarea支持tab按键的方法。分享给大家供大家参考。具体实现方法如下:
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程序设计有所帮助。
标签:JavaScript,Textarea,tab
0
投稿
猜你喜欢
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2023-10-16 08:05:00
SpringBoot+MySQL+Jpa实现对数据库的增删改查和分页详解
2024-01-17 16:20:59
laravel中短信发送验证码的实现方法
2023-11-15 08:05:16
python实现快速排序的示例(二分法思想)
2023-05-05 10:33:10
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2023-07-02 17:01:35
python爬虫之selenium库的安装及使用教程
2021-04-22 20:20:46
JavaScript实现模仿桌面窗口的方法
2024-04-19 10:16:56
GitHub上值得推荐的8个python 项目
2021-01-11 22:40:12
Python实现远程调用MetaSploit的方法
2022-07-17 05:40:31
基于Python socket的端口扫描程序实例代码
2021-02-24 03:05:09
php实现的支持断点续传的文件下载类
2023-11-23 16:52:19
Django中实现点击图片链接强制直接下载的方法
2023-08-03 13:29:19
Python中使用logging模块打印log日志详解
2021-10-01 02:32:17
PyQt5固定窗口大小的方法
2021-05-18 12:34:43
python 随机生成10位数密码的实现代码
2021-08-01 23:49:02
XMLHttp ASP远程获取网页内容代码
2011-04-10 10:41:00
ECharts设置x轴刻度间隔的2种解决方法
2023-08-28 04:18:38
键盘上下键的操作代码(选择)
2008-06-10 12:28:00
Linux下指定mysql数据库数据配置主主同步的实例
2024-01-16 09:10:37
利用types增强vscode中js代码提示功能详解
2023-07-15 05:57:08