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 相关文章推荐
小议javascript 设计模式 推荐
Oct 28 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
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
sony ICF-2010 拆解与改装
2021/03/02 无线电
PHP下常用正则表达式整理
2010/10/26 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
python如何使用unittest测试接口
2018/04/04 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python实现键盘控制鼠标移动
2020/11/27 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
详解Python设计模式之策略模式
2020/06/15 Python
python实现斗地主分牌洗牌
2020/06/22 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
单身申明具结书
2015/02/26 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书