devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

获取 Textarea 元素当前的光标位置及document.selection.createRange()资料_selection.getrange() createbookmark

作者：你好赵伟 | 2024-04-26 19:12:57

赞

踩

selection.getrange() createbookmark

在任何编辑器中，获取光标位置都是非常重要的，很多人可能认为较难，其实只要处理好浏览器的兼容，还是比较容易实现的。

下面我们一起来看看如何获取到 Textarea 元素中的光标位置（测试地址）。

首先，我们用 rangeData 对象作为数据存储，并获得焦点：

  1. var rangeData = {start: 0, end: 0, text: "" };
  2. textarea.focus();

对于非 IE 浏览器获取选区的起始和末尾位置其实非常容易：

  1. rangeData.start= el.selectionStart;
  2. rangeData.end = el.selectionEnd;

通过截取我们可以得到光标的选区内容：

rangeData.text = (rangeData.start != rangeData.end) ? el.value.substring(rangeData.start, rangeData.end): "";

而对于 IE 浏览器处理起来就比较麻烦了，但我们依旧可以获取到选区：

oS = document.selection.createRange();

同时还可获取 Textarea 元素的选区：

  1. // 为了使 oR 与 oS 在同一等级上比较，请勿使用：oR = textarea.createTextRange()
  2. oR = document.body.createTextRange();
  3. oR.moveToElementText(textarea);

如果光标在 Textarea 元素内，很自然 oS.text 就是我们需要的选区内容：

rangeData.text = oS.text;

并且我们可以通过 oS.getBookmark() 方法获取到选区的位置数据，该位置数据可以通过 moveToBookmark() 方法设置回去。

getBookmark: Retrieves a bookmark (opaque string) that can be used with moveToBookmark to return to the same range.

moveToBookmark: Moves to a bookmark.

我们用 rangeData.bookmark 来记录该位置数据：

rangeData.bookmark = oS.getBookmark();

下面是最重要的步骤：我们比较 oR 与 oS 的选区起始位置（使用 object.compareEndPoints(sType, oRange) 方法比较），如果 oR 的起始位置在 oS 之前，我们向前移动 oS 的起始位置1个字符（使用 object.moveStart(sUnit [, iCount]) 方法移动），一直当 oS 的起始位置在 oR 之前停止，移动的位置，则是选区的起始位置。

compareEndPoints: Compares an end point of a TextRange object with an end point of another range.

moveStart: Changes the start position of the range.

  1. for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {}
  2. rangeData.start = i;

但由于在 IE 中，Textarea 元素中的所有换行符都占 1 个字符，可以通过 alert(textarea.value.length) 查看，故要对上面的代码做部分处理：

  1. for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {
  2.     // Why? You can alert(textarea.value.length)
  3.     if (textarea.value.charAt(i) == '/n') {
  4.         i ++;
  5.     }
  6. }
  7. rangeData.start = i;

既然得到了选区的起始位置和选区字符串的字符，很自然我们可以计算得到选区的末尾位置：

rangeData.end = rangeData.text.length + rangeData.start;

获取 Textarea 的光标位置的 getCursorPosition 函数方法整理如下：

  1. /**
  2. * getCursorPosition Method
  3. *
  4. * Created by Blank Zheng on 2010/11/12.
  5. * Copyright (c) 2010 PlanABC.net. All rights reserved.
  6. *
  7. * The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.
  8. */
  9. function getCursorPosition(textarea) {
  10.     var rangeData = {text: "", start: 0, end: 0 };
  11. 	textarea.focus();
  12.     if (textarea.setSelectionRange) { // W3C
  13.         rangeData.start= textarea.selectionStart;
  14.         rangeData.end = textarea.selectionEnd;
  15.         rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";
  16.     } else if (document.selection) { // IE
  17.         var i,
  18.             oS = document.selection.createRange(),
  19.             // Don't: oR = textarea.createTextRange()
  20.             oR = document.body.createTextRange();
  21.         oR.moveToElementText(textarea);
  23.         rangeData.text = oS.text;
  24.         rangeData.bookmark = oS.getBookmark();
  26.         // object.moveStart(sUnit [, iCount])
  27.         // Return Value: Integer that returns the number of units moved.
  28.         for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {
  29.             // Why? You can alert(textarea.value.length)
  30.             if (textarea.value.charAt(i) == '/n') {
  31.                 i ++;
  32.             }
  33.         }
  34.         rangeData.start = i;
  35.         rangeData.end = rangeData.text.length + rangeData.start;
  36.     }
  38.     return rangeData;
  39. }

得到 Textarea 元素光标位置，当Textarea 中的光标丢失了，再设置回来就简单多了：

  1. /**
  2. * setCursorPosition Method
  3. *
  4. * Created by Blank Zheng on 2010/11/12.
  5. * Copyright (c) 2010 PlanABC.net. All rights reserved.
  6. *
  7. * The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.
  8. */
  9. function setCursorPosition(textarea, rangeData) {
  10.     if(!rangeData) {
  11.         alert("You must get cursor position first.")
  12.     }
  13.     if (textarea.setSelectionRange) { // W3C
  14.         textarea.focus();
  15.         textarea.setSelectionRange(rangeData.start, rangeData.end);
  16.     } else if (textarea.createTextRange) { // IE
  17.         var oR = textarea.createTextRange();
  18.         // Fixbug :
  19.         // In IE, if cursor position at the end of textarea, the setCursorPosition function don't work
  20.         if(textarea.value.length === rangeData.start) {
  21.             oR.collapse(false)
  22.             oR.select();
  23.         } else {
  24.             oR.moveToBookmark(rangeData.bookmark);
  25.             oR.select();
  26.         }
  27.     }
  28. }

测试地址：http://www.planabc.net/demo/range/textarea-cursor-position.html

扩展阅读：

 

 

 

====================================================================================

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo ： Textarea 元素的光标位置</title>
<style>
#result {
    font-size:18px;
    line-height:25px;
    padding-left:20px;
}
</style>
</head>

<body>

<h1>Textarea 元素的光标位置</h1>
<ul>
 <li>获取 Textarea 元素当前的光标位置</li>
    <li>设置回原先的 Textarea 元素的光标位置</li>
    <li>在 Textarea 元素的光标位置插入文本</li>
</ul>

<form action="#">
    <textarea id="test" rows="8" cols="50"></textarea>
    <p>
        <input type="button" id="get" value="Get Cursor Position"/>
        <input type="button" id="set" value="Set Cursor Position"/>
        <input type="button" id="add" value="Add Text After Cursor Position"/>
    </p>
</form>

<h2>Textarea Range：</h2>
<div id="result"></div>

<script type="text/javascript">

/**
 * cursorPosition Object
 *
 * Created by Blank Zheng on 2010/11/12.
 * Copyright (c) 2010 PlanABC.net. All rights reserved.
 *
 * The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.
 */
 
var cursorPosition = {
 get: function (textarea) {
  var rangeData = {text: "", start: 0, end: 0 };
 
  if (textarea.setSelectionRange) { // W3C 
   textarea.focus();
   rangeData.start= textarea.selectionStart;
   rangeData.end = textarea.selectionEnd;
   rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): "";
  } else if (document.selection) { // IE
   textarea.focus();
   var i,
    oS = document.selection.createRange(),
    // Don't: oR = textarea.createTextRange()
    oR = document.body.createTextRange();
   oR.moveToElementText(textarea);
   
   rangeData.text = oS.text;
   rangeData.bookmark = oS.getBookmark();
   
   // object.moveStart(sUnit [, iCount])
   // Return Value: Integer that returns the number of units moved.
   for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {
    // Why? You can alert(textarea.value.length)
    if (textarea.value.charAt(i) == '/r' ) {
     i ++;
    }
   }
   rangeData.start = i;
   rangeData.end = rangeData.text.length + rangeData.start;
  }
  
  return rangeData;
 },
 
 set: function (textarea, rangeData) {
  var oR, start, end;
  if(!rangeData) {
   alert("You must get cursor position first.")
  }
  textarea.focus();
  if (textarea.setSelectionRange) { // W3C
   textarea.setSelectionRange(rangeData.start, rangeData.end);
  } else if (textarea.createTextRange) { // IE
   oR = textarea.createTextRange();
   
   // Fixbug : ues moveToBookmark()
   // In IE, if cursor position at the end of textarea, the set function don't work
   if(textarea.value.length === rangeData.start) {
    //alert('hello')
    oR.collapse(false);
    oR.select();
   } else {
    oR.moveToBookmark(rangeData.bookmark);
    oR.select();
   }
  }
 },

 add: function (textarea, rangeData, text) {
  var oValue, nValue, oR, sR, nStart, nEnd, st;
  this.set(textarea, rangeData);
  
  if (textarea.setSelectionRange) { // W3C
   oValue = textarea.value;
   nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end);
   nStart = nEnd = rangeData.start + text.length;
   st = textarea.scrollTop;
   textarea.value = nValue;
   // Fixbug:
   // After textarea.values = nValue, scrollTop value to 0
   if(textarea.scrollTop != st) {
    textarea.scrollTop = st;
   }
   textarea.setSelectionRange(nStart, nEnd);
  } else if (textarea.createTextRange) { // IE
   sR = document.selection.createRange();
   sR.text = text;
   sR.setEndPoint('StartToEnd', sR);
   sR.select();
  }
 }
}


var tx=document.getElementById("test"),
 re=document.getElementById("result"),
 pos;

document.getElementById("get").onclick = function(){
 //alert(tx.value.length);
 pos = cursorPosition.get(tx);
 re.innerHTML=("<strong>Range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>Text :</strong> " + (!pos.text ? '//--': pos.text));
}

document.getElementById("set").onclick = function(){
 cursorPosition.set(tx, pos);
}

document.getElementById("add").onclick = function(){
 cursorPosition.add(tx, pos, input = prompt("你想插入替换的文本：",""));
}
</script>

</body>
</html>
===================================================================================

 

 

【转】DOM-document.selection.createRange方法和TextRange对象
2010-06-29 13:55

document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。

配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。

实例一：

<textarea cols=50 rows=15>
哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！</textarea>
<input type=button value=选择字后点击我看看 οnclick=alert(document.selection.createRange().text)>
</form>

实例二：

<body>
    <textarea name="textfield" cols="50" rows="6">就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字
哪位老大能解决的呀?请多多帮忙!!!谢谢
</textarea>
    <input type="button" value="showSelection" οnclick="alert(document.selection.createRange().text)">
    <input type="button" value="showclear" οnclick="alert(document.selection.clear().text)">
    <input type="button" value="showtype" οnclick="alert(document.selection.type)">
    <textarea name="textfield" cols="50" rows="6" οnselect="alert(document.selection.createRange().text)">就是现在文本域里有一段文字，当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框，对话框的信息就是你选中的文字
哪位老大能解决的呀?请多多帮忙!!!谢谢
    </textarea>

</body>

实例三：选中Input中的文本

<SCRIPT   LANGUAGE="JavaScript">
<!--
function   test2()
{
var   t=document.getElementById("test")
var   o=t.createTextRange()
alert(o.text)
o.moveStart("character",2)
alert(o.text)
o.select()
}
//-->
</SCRIPT>
<input   type='text'   id='test'   name='test'><input   type=button   οnclick='test2()'   value='test'   name='test3'>
对textarea中的内容，进行选中后，加效果
<script language="JavaScript">
<!--
function bold(){
Qr=document.selection.createRange().text;
if(!Qr || document.selection.createRange().parentElement().name!='description')
{
txt=prompt('Text to be made BOLD.','');
if(txt!=null && txt!='') document.form1.description.value+=''+txt+'';
}
else{
document.selection.createRange().text=''+document.selection.createRange().text+'';
document.selection.empty();
}
}
//-->
</script>
<input type="button" value="加粗" οnclick="bold();" />
<textarea name="description" style="width: 436px; height: 296px">选中我，点击加粗</textarea>

    实例四：javascript捕获到选中的网页中的纯文本内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标取词</title>
<script>
function getSel()
{
      var t=window.getSelection?window.getSelection():(document.getSelection?document.getSelection():(document.selection?document.selection.createRange().text:""))
      document.forms[0].selectedtext.value = t;
}
</script></head>
<body οnmοuseup="getSel()">
<form>
<textarea name="selectedtext" rows="5" cols="50"></textarea>
</form>
以上的代码可以捕获到选中的网页中的纯文本内容(不含HTML标签)
如果想获得包含html的内容，将document.selection.createRange().text改成document.selection.createRange().htmlText
</body>
</html>

 

DOM-TextRange对象使用及方法


TextRange对象是动态HTML(DHTML)的高级特性，使用它可以实现很多和文本有关的任务，例如搜索和选择文本。文本范围让您可以选择性的将字符、单词和句子从文档中挑选出来。TextRange对象是在HTML文档将要显示的文本流上建立开始和结束位置的抽象对象。

下面是TextRange的常用属性与方法：

属性
boundingHeight 获取绑定TextRange对象的矩形的高度
boundingLeft 获取绑定TextRange 对象的矩形左边缘和包含TextRange对象的左侧之间的距离
offsetLeft 获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置
offsetTop 获取对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置
htmlText 获取绑定TextRange对象的矩形的宽度
text 设置或获取范围内包含的文本
方法
moveStart 更改范围的开始位置
moveEnd 更改范围的结束位置
collapse 将插入点移动到当前范围的开始或结尾
move 折叠给定文本范围并将空范围移动给定单元数
execCommand 在当前文档、当前选中区或给定范围上执行命令
select 将当前选择区置为当前对象
findText 在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。

使用TextRange对象通常包括三个基本的步骤:

1.创建文本范围
2.设置开始点和结束点
3.对范围进行操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function moveCursor()  
{  
　　　 var temp = this.txtNum.value;   
　　　 if(isNaN(temp))  
　　　 {  
　　　　　alert("请输入一个数字");  
　　　　　return;  
　　　 }  
　　　 var rng = this.txtTest.createTextRange();  
　 　　rng.move("character",temp);  
　　　 rng.select();　　　  
}   
</script>
</HEAD>
<BODY>
<input type="text" name="txtTest" value="明·罗贯中《三国演义》第二十一回 操曰:“夫英雄者，胸怀大志，腹有良谋，有包藏宇宙之机，吞吐天地之志者也。" size="100"><br>
移动光标到第<input type="text" name="txtNum" size="5">个位置  
<input type="button" name="btnMove" value="移动" οnclick="moveCursor()">   
</BODY>
</HTML>

1.createTextRange()

创建一个TextRange对象,BODY、TEXT、TextArea、BUTTON等元素都支持这个方法。该方法返回一个TextRange对象。

2.move("Unit"[,count])

move()方法执行两个操作。首先，方法在前一个结束点的位置重叠当前文档，将这里作为一个插入点；下一步，它将插入点向前或向后移动任意个字符、单词或句子单位。

方法的第一个参数是字符串，它指定的单位有character(字符)、word(词)、sentence(段落)、textedit。textedit值将插入点移动到整个文本范围的结束处(不需要参数)。如果指定为前三种单位，忽略参数时默认值为1,也可以指定一个整数值来指示单元数，正数代表向前移动，负数代表向后移动。

注意在move()方法执行后范围仍是重叠的。

3.select()

select()方法选择当前文本范围内的文本，这里的显示光标也必须利用它来实现，因为所谓的"光标"可以理解为边界重合的范围

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<textarea name="txtBox" rows="7" cols="50" id="txtBox">
菊花台 (满城尽带黄金甲主题曲)
歌手：周杰伦 专辑：依然范特西

你的泪光 柔弱中带伤
惨白的月弯弯 勾住过往
夜太漫长 凝结成了霜
是谁在阁楼上冰冷的绝望
雨轻轻淌 朱红色的窗
我一生在纸上 被风吹乱
梦在远方 化成一缕霞
随风飘散 你的模样

菊花惨淡地伤 你的笑容已泛黄
花落人断肠 我心事静静淌
北风乱夜未央 你的影子剪不断
徒留我孤单在湖面生霜
</textarea><br>
<input type="text" value="输入要查询的内容" id="txtFind">
<input type="button" value="查找下一个" οnclick="findText(txtFind.value)">
<script language="javascript">
var rng = txtBox.createTextRange();
function findText(str)
{
　　 if(str=="")
　　 return;
　　 //定义一个变量，作为moveStart()函数的偏移量，即开始点跳过选择文本
　　 var num = 0;
　　 if(document.selection)　　
　　 num = document.selection.createRange().text.length;
　　 //每次调用函数，结束点都为末尾，而开始点是跳过选择文本后的新开始点
　　 rng.moveStart("character",num);
　　 rng.moveEnd("character",txtBox.value.length);
　　 //搜索到后选择文本　　
　　 if(rng.findText(str))
　　 rng.select();
　　 //搜索到最后的范围还是找不到，则提示搜索完毕，并重新恢复rng最初的范围(否则无法执行新搜索)　　
　　 if(rng.text!=str)
　 　{　　
　　 alert("搜索完毕");
　　 rng = txtBox.createTextRange();
　　 }
}　　
</script>
</BODY>
</HTML>

上面的例子演示了利用moveStart()和moveEne()方法选择范围，出现的几个方法的说明如下：

4.moveStart("Unit"[,count])与moveEnd("Unit"[,count])

moveStart()与moveEnd()方法类似于move()方法,默认情况下开始点为容器第一个字符、结束点为最后一个字符

我们可以修改上面的selectText()函数来证明:

function selectText()
{
　 var rng = txtBox.createTextRange();
　 rng.moveStart("character",1);
　 rng.moveEnd("character",-1);
　 rng.select();
}
将开始点向前移动一个字符、结束点向后移动一个字符，运行后可以看到选择的范围是除第1个字符和最后1个字符的整个文本范围。

5.collapse([Boolean])

可以用collapse()方法把文本范围从当前尺寸重叠成字符间的单个插入点。collapse()方法的可选参数是Boolean值,它指出范围是在当前范围的开始点重合，还是结束点重合。默认值为true，在开始点重合:

5.findText("searchString"[,searchScope,flags])

TextRange对象最有用的方法之一是findText()方法，其默认行为是从开始点到结束点浏览文本范围，搜索一个不区分大小写的字符串匹配。如果在范围中发现一个实例，范围的开始点和结束点就放到这个文本中，方法返回true；否则返回false,开始点和结束点都不动。方法仅搜索显示文本，而任何标记或属性都不会被搜索。

可选参数searchScope是一个整数值，它指示从开始点的字符数，值越大，包含在搜索范围的文本越多；负值将迫使搜索操作从当前开始点向后搜索。

可选参数flag用来设置搜索是否区分大小写，或者是否仅匹配整个单词。参数是整数值，它用按位组合的数学方法计算单个值，这些值能容纳一个或多个设置。匹配整个单词的值为2；匹配大小写的值为4；如果只想匹配一项，则只提供希望的值就够了，但对于两种行为，要用位操作XOR操作符(^操作符)使值为6。

findText()方法最常用的应用包括范围中的查找和替换操作，以及格式化一个字符串的实例，因为搜索通常以范围的当前开始点开始，所以再次查询要将开始点移到范围中匹配文本的末尾(如示例3)，移动后才能使findText()继续浏览剩下的文本范围，来查找另一个匹配。可以使用collapse(false)方法迫使开始点移动第一个匹配的范围的结束点。所以示例3的findText()函数也可以修改为:

<script language="javascript">

var rng = txtBox.createTextRange();

function findText(str)
{
　　 if(str=="")
　　 return;
　　
　　 if(rng.findText(str))
　　　{
　　   rng.select();
　　　rng.collapse(false);
　　   }
　　 //搜索到最后的范围还是找不到，则提示搜索完毕，并重新恢复rng最初的范围(否则无法执行新搜索)　　
　　 else
　   　{　　
　　   alert("搜索完毕");
　　   rng = txtBox.createTextRange();
　　   }
}　　

</script>

==================================================================================

 

  1. <script   language="javascript">      
  2. //禁止用F5键      
  3. function   document.onkeydown()      
  4. {      
  5.           if   (   event.keyCode==116)      
  6.           {      
  7.                   event.keyCode   =   0;      
  8.                   event.cancelBubble   =   true;      
  9.                   return   false;      
  10.           }      
  11. }      
  12.        
  13. //禁止右键弹出菜单      
  14. function   document.oncontextmenu()      
  15. {      
  16.       return   false;      
  17. }      
  18.        
  19. //下面代码实现全屏显示      
  20. function   window.onload(){      
  21.       var   Request   =   new   Array();//保存参数      
  22.       var   s   =   location.search.substring(1);      
  23.       if   (s   &&   s!=""){      
  24.       var   list   =   s.split("&");      
  25. for   (var   i=0;   i   <   list.length;   i++){      
  26. var   pair   =   list[i].split("=");      
  27. if   (pair[0]   &&   pair[0]   !=""){      
  28. Request[unescape(pair[0])]   =   unescape(pair[1]);      
  29. }      
  30. }      
  31.       }      
  32.        
  33.       var   fullscreen=Request["fullscreen"];      
  34.       if(fullscreen!="yes"){      
  35.       var   file   =self.location;      
  36.       var   a   =   window.open("about:blank","","fullscreen=yes")      
  37.       self.opener=null      
  38.       self.close()      
  39.       a.location=file   +   "?fullscreen=yes";      
  40.       }      
  41. }      
  42. </script>  

==============================================================================

 

  1. <script language="Javascript"><!--    
  2. //屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键    
  3. //Author: meizz(梅花雨) 2002-6-18    
  4. function document.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键    
  5. function window.onhelp(){return false} //屏蔽F1帮助    
  6. function document.onkeydown()    
  7. {    
  8. if ((window.event.altKey)&&    
  9. ((window.event.keyCode==37)|| //屏蔽 Alt+ 方向键 ←    
  10. (window.event.keyCode==39))) //屏蔽 Alt+ 方向键 →    
  11. {    
  12. alert("不准你使用ALT+方向键前进或后退网页！");    
  13. event.returnValue=false;    
  14. }    
  15. /* 注：这还不是真正地屏蔽 Alt+ 方向键，   
  16. 因为 Alt+ 方向键弹出警告框时，按住 Alt 键不放，   
  17. 用鼠标点掉警告框，这种屏蔽方法就失效了。以后若   
  18. 有哪位高手有真正屏蔽 Alt 键的方法，请告知。*/    
  19. if ((event.keyCode==8) || //屏蔽退格删除键    
  20. (event.keyCode==116)|| //屏蔽 F5 刷新键    
  21. (event.ctrlKey && event.keyCode==82)){ //Ctrl + R    
  22. event.keyCode=0;    
  23. event.returnValue=false;    
  24. }    
  25. if (event.keyCode==122){event.keyCode=0;event.returnValue=false;} //屏蔽F11    
  26. if (event.ctrlKey && event.keyCode==78) event.returnValue=false; //屏蔽 Ctrl+n    
  27. if (event.shiftKey && event.keyCode==121)event.returnValue=false; //屏蔽 shift+F10    
  28. if (window.event.srcElement.tagName == "A" && window.event.shiftKey)    
  29. window.event.returnValue = false; //屏蔽 shift 加鼠标左键新开一网页    
  30. if ((window.event.altKey)&&(window.event.keyCode==115)) //屏蔽Alt+F4    
  31. {    
  32. window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");    
  33. return false;    
  34. }    
  35. }    
  36. </script>   

============================================================================

#  屏蔽退格删除键,屏蔽F5 刷新键,Ctrl+R
<body οnkeydοwn="KeyDown()">

<script language=javascript>

function KeyDown()
{
//屏蔽退格删除键,屏蔽 F5 刷新键,Ctrl + R
if ((event.keyCode==116)||(event.ctrlKey && event.keyCode==82))
{
event.keyCode=0;
event.returnValue=false; //为什么还要加上这一句
}

</script>

 

 

 

 ============================================================================

 

 

如下一段代码：

<html>
 <script>
  function checkForm(){
   if(event.keyCode ==13){
     event.keyCode =9;
   }
  }
 </script>
 <body>
  <form name ="form1">
   <input type="text" name = "text1" onkeydown = "checkForm()">
   <input type="button" name = "button1" value="按钮">
  </form>
 </body>
</html>

当按下回车时，焦点从文本框移到按钮上。如果把它换成“onkeypress”，焦点不会转移，也不会失去。但是如果换成“onkeyup”，则失去焦点，页面重新载入。msdn上有三者的区别：

名称 说明
onkeypress
 这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。
 
onkeyup
 这个事件在用户放开任何先前按下的键盘键时发生。
 
onkeydown
 这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。
 


（但是试验中，onkeypress好像对箭头和功能键都能识别，奇怪！）。对于onkeyup为什么会重新刷新页面，原因不详。猜想是不是浏览器对于onkeyup有默认的执行事件，其默认的执行事件就是重新载入页面。有待以后了解！还有一点要注意，就是键盘上的同一个值，可能对应的onkeypress和onkeydown（onkeyup一般和onkeydown一样）不同，比如小键盘上的“1”，对应的onkeypress的值为49，而onkeydown和onkeyup则都是97！msdn上有个例子，可以很好的查看不同的键盘值对应的不同事件值。url：http://msdn.microsoft.com/library/en-us/dnacc/html/Example3_Calculator.asp

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/linhonglong/archive/2006/03/07/618125.aspx

 

 

 

 

 

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/492683
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号