注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

{'coding': 'life'}

          I want to be a geek

 
 
 

日志

 
 
 
 

【引用】html中textarea域中屏蔽回车和退格键  

2011-05-30 16:04:04|  分类: 前端 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

客户的需求是,对文本框以前的内容不能删除和修改(数据库读出),但可以在后面添加新的内容,对新的内容可以编辑。

 

问题已经完全解决,下面是最终源代码:  
    
  <html> 
  <head> 
  <meta  http-equiv="Content-Type"   content="text/html;  charset=gb2312"> 
 <title>不能修改原有内容的文本框</title> 
  </head> 
   
   
  <body> 
  <form  name="f">  
  <textarea  name="textarea"   cols="45"  rows="5"   onMouseMove="Enable()"  onMouseUp="Disable()"    onKeyDown="check()"  >  
  I   love  this  game!</textarea> 
  </form> 
  </body> 
  <script> 
  var   orLength  =  f.elements.textarea.value.length;  
   
  function   Enable() 
  {  
  document.f.textarea.readOnly  =   false;  
  }  
   
  function   Disable() 
  {  
  if   (event.button  ==   2   |  event.button   ==  3)  
  {  
  document.f.textarea.readOnly  =   true;  
  }  
  }  
   
  function   check() 
  {  
  var   iekey  =   event.keyCode;  
  //不限光标定位  
  if(   iekey  >=   33  &&  iekey<=40   ) 
  return;  
  //取当前坐标  
    f.elements.textarea.focus(); 
    var  workRange=document.selection.createRange(); 
    f.elements.textarea.select(); 
    var  allRange=document.selection.createRange();  
   workRange.setEndPoint("StartToStart",allRange); 
    var  i=workRange.text.length;  
    workRange.collapse(false); 
    workRange.select(); 
  //小于原始长度,不接受任何事件  
  if(i<orLength) 
  {  
  event.returnValue=false; 
  }  
  //等于原始长度,不接受退格键  
  if(   iekey  ==   8  &&  f.elements.textarea.value.length<=orLength) 
  {  
  event.returnValue=false; 
  }  
  //对选中区域,不接受任意键输入  
 if(document.selection.createRange().text.length>0) 
  {  
  event.returnValue=false; 
  }  
  }  
   
  </script> 
  </html>

  评论这张
 
阅读(356)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017