js实现按一下删除键删除整个单词附demo
在文本框倒叙输入一文中提到了设置文本框焦点的javascript代码，今天就使用这段代码来做一个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>
相关推荐
-
js实现按一下删除键删除整个单词附demo
在文本框倒叙输入一文中提到了设置文本框焦点的javascript代码,今天就使用这段代码来做一个Demo.内容就是当删除单词时就一次性删除整个单词,如图所示: 下面我把示例代码贴上: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"
-
JS密码生成与强度检测完整实例(附demo源码下载)
本文实例讲述了JS密码生成与强度检测的方法.分享给大家供大家参考,具体如下: 1. 生成强密码 截图如下: 相关代码如下: function getPwd(n) { var s = ''; while(n--) s += String.fromCharCode(33 + Math.floor(Math.random()*(126-33))) document.getElementById('txt1').value = s; } 2. 计算密码破解时间 截图如下: 相关代码如下: functio
-
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
本文实例讲述了js基于qrcode.js生成二维码的方法.分享给大家供大家参考,具体如下: 调用qrcode.js文件代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <script src="js/qrcode.js"></script> <style> #qr
-
用js读、写、删除Cookie代码续篇
上次的一篇文章:用js读.写.删除Cookie代码分享及详细注释说明,在实践中发现了一些问题: 1.cookie在本地文件上只能在火狐上调试,IE和chrome无效 2.cookie没有设置为永不过期,只考虑了设置一个时间段就过期,显然不太合理. 这次给出的是比较合理的cookie操作代码: 复制代码 代码如下: var Cookie = { get: function (k) { return ((new RegExp(["(?:; )?", k, "
-
js操作DOM--添加、删除节点的简单实例
js removeChild() 用法 <body> <p id="p1">welcome to <b>javascript</b> world !</p> <script language="javascript" type="text/javascript"> <!-- function nodestatus(node) { var temp=""
-
JS实现动态增加和删除li标签行的实例代码
如下所示: function addDepartment() { <span style="white-space:pre"> </span>var x = document.getElementById('department'); <span style="white-space:pre"> </span>var l = x.childNodes.length; <span style="white
-
浅谈react.js 之 批量添加与删除功能
最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮 添加按钮的事件 被添加组件存放的容器 做这个效果只需要明白三个方法的用途就OK: 直接绑定要删除组件的 deleteType(),它是调用删除index数量的方法 removeContent() //删除{qiniu}与{deleteQiNiu}内容,是把
-
JS两个数组比较,删除重复值的巧妙方法(推荐)
偶尔需要我们比较两个数组,在一个数组中删除另一个数组存在的值.我们常常用的方法是循环比较判断并删除,最近看到另一个好方法巧妙删除的例子: var arr1 = ["i", "b", "c", "d", "e", "f","x"]; //数组A var arr2 = ["a", "b", "c", "
-
js中数组插入、删除元素操作的方法
实例如下: /* * 删除数组元素:Array.removeArr(index) */ Array.prototype.removeArr = function (index) { if (isNaN(index) || index>= this.length) { return false; } this.splice(index, 1); } /* * 插入数组元素:Array.insertArr(dx) */ Array.prototype.insertArr = function (in
-
js自定义trim函数实现删除两端空格功能
本文实例讲述了js自定义trim函数实现删除两端空格功能.分享给大家供大家参考,具体如下: 兼容IE低版本浏览器,以及其他一些低版本脚本的浏览器 js中本身是没有trim函数的 //删除左右两端的空格 function trim(str){ return str.replace(/(^\s*)|(\s*$)/g, ""); } //删除左边的空格 function ltrim(str){ return str.replace(/(^\s*)/g,""); } //删