js实现按一下删除键删除整个单词附demo


Posted in Javascript onSeptember 05, 2014

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

下面我把示例代码贴上:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
.content {width: 300px;margin: 0 auto;}
</style>
<script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
</head>
<body>
<div class="content">
<textarea name="" id="demo" cols="30" rows="10"></textarea>
</div>
<script>
var getCursortPosition = function(ctrl) {
var CaretPos = 0;
// IE Support
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || +ctrl.selectionStart === 0)
{CaretPos = ctrl.selectionStart;}
return (CaretPos);
};

var selectSomeText = function(element,begin,end)
{
if (element.setSelectionRange)
{
element.setSelectionRange(begin,end);
}
else if (element.createTextRange)
{
var range = element.createTextRange();
range.moveStart("character",begin);
range.moveEnd("character",end);
range.select();
}
};

var delWholeWord = function(text, field, pos){
var startIndex = pos;
if (field.charAt(pos-1) !== ' '){
for (var i=pos-2;i>=0;i--){
if (field.charAt(i) === ' ' || i === 0){
startIndex = i;
break;
}
}
selectSomeText(text, startIndex, pos)
}

};
$('#demo').keydown(function(event) {
if(event.keyCode !== 8) {
return;
}
var bodyText = $(this)[0];
var bodyField = $(this).val();
var pos = getCursortPosition(bodyText);
delWholeWord(bodyText, bodyField, pos);
});
</script>
</body>
</html>
Javascript 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
JS获取当前网页大小以及屏幕分辨率等
Sep 05 #Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 #Javascript
jQuery表格插件datatables用法总结
Sep 05 #Javascript
jQuery中index()的用法分析
Sep 05 #Javascript
使用jquery解析XML的方法
Sep 05 #Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 #Javascript
javascript获取dom的下一个节点方法
Sep 05 #Javascript
You might like
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
php实现的二分查找算法示例
2017/06/20 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
pandas 读取各种格式文件的方法
2018/06/22 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Python分类测试代码实例汇总
2020/07/23 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
护士实习自我鉴定
2013/10/22 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
实习班主任自我评价
2015/03/11 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL