按一下删除键删除整个单词

简介: 在文本框倒叙输入一文中提到了设置文本框焦点的javascript代码,今天就使用这段代码来做一个Demo。内容就是当删除单词时就一次性删除整个单词,如图所示:  下面我把示例代码贴上: 1 DOCTYPE html> 2 3 4 5 6 7 .

在文本框倒叙输入一文中提到了设置文本框焦点的javascript代码,今天就使用这段代码来做一个Demo。内容就是当删除单词时就一次性删除整个单词,如图所示:

 下面我把示例代码贴上:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4  <title></title>
 5     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 6     <style>
 7         .content {width: 300px;margin: 0 auto;}
 8     </style>
 9     <script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
10 </head>
11 <body>
12     <div class="content">
13         <textarea name="" id="demo" cols="30" rows="10"></textarea>
14     </div>
15     <script>
16         var getCursortPosition  = function(ctrl) {
17             var CaretPos = 0;
18             // IE Support
19             if (document.selection) {
20                 ctrl.focus();
21                 var Sel = document.selection.createRange();
22                 Sel.moveStart ('character', -ctrl.value.length);
23                 CaretPos = Sel.text.length;
24             }
25             // Firefox support
26             else if (ctrl.selectionStart || +ctrl.selectionStart === 0)
27                 {CaretPos = ctrl.selectionStart;}
28             return (CaretPos);
29         };
30 
31         var selectSomeText = function(element,begin,end)
32         {
33             if (element.setSelectionRange)
34             {
35                 element.setSelectionRange(begin,end);
36             }
37             else if (element.createTextRange)
38             {
39                 var range = element.createTextRange();
40                 range.moveStart("character",begin);
41                 range.moveEnd("character",end);
42                 range.select();
43             }
44         };
45 
46         var delWholeWord = function(text, field, pos){
47             var startIndex = pos;
48             if (field.charAt(pos-1) !== ' '){
49                 for (var i=pos-2;i>=0;i--){
50                     if (field.charAt(i) === ' ' || i === 0){
51                         startIndex = i;
52                         break;
53                     }
54                 }
55                 selectSomeText(text, startIndex, pos)
56             }
57 
58         };
59         $('#demo').keydown(function(event) {
60             if(event.keyCode !== 8) {
61                 return;
62             }
63             var bodyText = $(this)[0];
64             var bodyField = $(this).val();
65             var pos = getCursortPosition(bodyText);
66             delWholeWord(bodyText, bodyField, pos);
67         });
68     </script>
69 </body>
70 </html>

 

相关文章
|
资源调度 前端开发 算法
前端依赖版本重写指南
感谢神奇的 Semver 动态规则,npm 社区经常会发生依赖包更新后引入破坏变更的情况(应用没有使用依赖锁的话),而应用开发者就要在自己的依赖声明里先临时绕过,避免安装到有问题的版本,如果是一级依赖,只需要改 package.json 的声明就可以了,但如果是子依赖,就需要进行版本重写(overrides/resolution)了。本文是一篇针对版本重写功能的指南性文章,当你遇到如下的问题时,就可以按照对应的依赖重写语法,解决这些依赖问题了。
7564 1
前端依赖版本重写指南
|
Linux 测试技术 项目管理
产品、项目、平台、系统、应用的关系
产品、项目、平台、系统、应用的关系
1224 0
|
传感器 Cloud Native 数据挖掘
开源技术在教育中的应用
开源技术在教育中的应用
607 0
|
传感器 网络协议 物联网
华为鸿蒙OS尖刀武器之分布式软总线技术
华为鸿蒙OS尖刀武器之分布式软总线技术
华为鸿蒙OS尖刀武器之分布式软总线技术
|
JavaScript
vue项目中引入阿里图标iconfont
该文章指导如何在Vue项目中引入并使用阿里图标库Iconfont,包括图标的选取、下载配置文件及在项目中引入和使用图标的具体步骤。
|
12月前
|
网络协议 数据安全/隐私保护 网络虚拟化
计算机网络的体系结构
OSI模型,即开放系统互连模型,由ISO于1984年提出,是计算机网络通信的参考模型,将网络功能划分为七层:物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。各层负责不同的通信任务,使网络设计与管理更加模块化和高效。
768 1
|
机器学习/深度学习 数据采集 分布式计算
社交网络分析4(下):社交网络链路预测分析、LightGBM框架、LLSLP方法(LightGBM 堆叠链路预测)、堆叠泛化 、社交网络链路预测分析的挑战
社交网络分析4(下):社交网络链路预测分析、LightGBM框架、LLSLP方法(LightGBM 堆叠链路预测)、堆叠泛化 、社交网络链路预测分析的挑战
663 0
|
Serverless BI Python
Python中的for循环和range()函数用法详解
Python中的for循环和range()函数用法详解
|
JavaScript 安全 前端开发
介绍DOM Based XSS
【8月更文挑战第25天】介绍DOM Based XSS
363 1
|
Kubernetes 负载均衡 调度
Kubernetes的主要用途是什么?
【7月更文挑战第2天】Kubernetes的主要用途是什么?
643 1
下一篇
oss云网关配置