脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript监听文本框回车事件并过滤文本框空格

JavaScript监听文本框回车事件并过滤文本框空格的方法

 更新时间：2015年04月16日 10:27:31   作者：lele  
这篇文章主要介绍了JavaScript监听文本框回车事件并过滤文本框空格的方法,涉及javascript操作文本框获取、清空及删除空格的技巧,需要的朋友可以参考下

本文实例讲述了JavaScript监听文本框回车事件并过滤文本框空格的方法。分享给大家供大家参考。具体如下：

<script type="text/javascript" language="javascript">
var username = null;
var password = null;
//获取文本框  
onload = function()
{
 username = document.getElementById("txtUserName");
 password = document.getElementById("txtPassWord");   
}
//清空文本框
function clearTxt()
{
 username.value = "";
 password.value = "";
 username.focus();
 // document.getElementById('txtUserName').value="";
 // document.getElementById('txtPassWord').value="";
 // document.getElementById('txtUserName').focus();  
}
 //确定
function chkTxt()
{
 //删除前后空格
 username.value = username.value.replace(/(^\s*)|(\s*$)/g,"");
 password.value = password.value.replace(/(^\s*)|(\s*$)/g,"");
 //判空
 if(username.value.length == 0)
 {
 alert("请输入用户名!");
 username.focus();
 }
 else if(password.value.length == 0)
 {
 alert("请输入密码!");
 password.focus();
 }
 else
 document.getElementById("btnLogin").click();
}
//回车监听
function onkey()
{
 if (window.event.keyCode==13)
 {
//    document.all["btnLogin"].focus();
//    if(document.activeElement.id = "aReset")
//判断当前焦点所在的控件的id是aReset
//    {
//     document.getElementById("aReset").focus();
//    }
 document.getElementById("aLogin").focus();
 return false;
 }
}
</script>

css代码：

<style type="text/css"> 
#btnLogin 
{ 
 width: 0px; 
 height: 0px; 
 border-style: none; 
 background-color: White; 
} 
</style>

html代码：

<body onkeydown="onkey()">//把回车监听加入body 
<form id="login_form" name="login_form" runat="server"> 
 <div>
    <label>用户：</label><input id="txtUserName" 
    runat="server" name="u_name" class="input bold" type="text"/> 
    <label>密码：</label><input id="txtPassWord" 
    runat="server" name="u_pass" class="input" type="password"/> 
    <a href="javascript:chkTxt()" id="aLogin">确定</a> 
    <%--<a href="javascript:document.forms['login_form'].reset()">
    重置</a>--%> 
    <a href="javascript:clearTxt()" id="aReset">重置</a> 
   <asp:Button ID="btnLogin" runat="server"
   Text="" OnClick="btnLogin_Click" /> 
 </div> 
</form> 
</body>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 为非IE浏览器添加mouseenter,mouseleave事件的实现代码

    为非IE浏览器添加mouseenter,mouseleave事件的实现代码

    为非IE浏览器添加mouseenter,mouseleave事件的实现代码,学习js的朋友可以参考下。
    2011-06-06
  • 微信小程序音乐播放器开发

    微信小程序音乐播放器开发

    这篇文章主要为大家详细介绍了微信小程序音乐播放器开发，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • tracking.js实现前端人脸识别功能

    tracking.js实现前端人脸识别功能

    这篇文章主要介绍了tracking.js实现前端人脸识别功能，本文通过实例代码截图的形式给大家展示的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 基于bootstrop常用类总结(推荐)

    基于bootstrop常用类总结(推荐)

    下面小编就为大家带来一篇基于bootstrop常用类总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS将光标聚焦在文本最后的实现代码

    JS将光标聚焦在文本最后的实现代码

    这篇文章主要介绍了JS将光标聚焦在文本最后的方法,需要的朋友可以参考下
    2014-03-03
  • 浅谈Web Storage API的使用

    浅谈Web Storage API的使用

    Web Storage为浏览器提供了方便的key value存储，是一种比cookie更加方便简洁的存储方式。也是诸多客户端存储方式中非常常见的一种
    2021-06-06
  • js实现简单拼图小游戏

    js实现简单拼图小游戏

    这篇文章主要为大家详细介绍了js实现简单拼图小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 亲自教你TypeScript 项目搭建过程

    亲自教你TypeScript 项目搭建过程

    这篇文章主要介绍了亲自教你TypeScript 项目搭建过程,我记得前一天，我们配置过一份 webpack 配置，直接复制过来使用，这里就不多说了，然后就是在项目中引入我们的 less，需要的朋友可以参考下
    2022-11-11
  • JS+CSS实现的拖动分页效果实例

    JS+CSS实现的拖动分页效果实例

    这篇文章主要介绍了JS+CSS实现的拖动分页效果,可实现鼠标拖动页面翻转到上一页或下一页的功能,涉及javascript操作页面元素与css样式的相关技巧,需要的朋友可以参考下
    2015-05-05
  • JS事件监听与事件委托举例详解(前端小白必学)

    JS事件监听与事件委托举例详解(前端小白必学)

    在JavaScript的学习中我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等,下面这篇文章主要给大家介绍了关于JS事件监听与事件委托的相关资料,需要的朋友可以参考下
    2024-07-07

最新评论