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 相关文章推荐
一些常用的JS功能函数代码
Jun 23 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
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中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python保存文件方法小结
2018/07/27 Python
python实现屏保计时器的示例代码
2018/08/08 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
一些Solaris面试题
2015/12/22 面试题
中专毕业个人的自荐信格式
2013/09/21 职场文书
计算机专业个人求职信范例
2013/09/23 职场文书
教你打造完美的创业计划书
2014/01/06 职场文书
中学教师培训制度
2014/01/31 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
超市食品安全承诺书
2015/04/29 职场文书
《失物招领》教学反思
2016/02/20 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书