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入门教程 Cookies
Jan 31 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
javascript关于继承解析
May 10 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
Vue如何实现变量表达式选择器
Feb 18 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为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
python3抓取中文网页的方法
2015/07/28 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python解析含有重复key的json方法
2019/01/22 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
用python对oracle进行简单性能测试
2020/12/05 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
宝信软件JAVA工程师面试经历
2012/08/19 面试题
精通CAD能手自荐书
2014/01/31 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
2015大学生实训报告
2014/11/05 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android