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


Posted in Javascript onApril 16, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
封装属于自己的JS组件
Jan 27 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
jQuery的文档处理程序详解
May 10 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
js编写选项卡效果
May 23 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
JQuery跳出each循环的方法
Apr 16 #Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 #Javascript
jQuery Ajax中的事件详细介绍
Apr 16 #Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 #Javascript
JavaScript实现随机替换图片的方法
Apr 16 #Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 #Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 #Javascript
You might like
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP代码优化的53个细节
2014/03/03 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
JavaScript中链式调用之研习
2011/04/07 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
专科毕业生学习生活的自我评价
2013/10/26 职场文书
怎样客观的做好自我评价
2013/12/28 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
订货会邀请函
2015/01/31 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
英文慰问信范文
2015/03/24 职场文书
涨价通知怎么写
2015/04/23 职场文书
诚信教育主题班会
2015/08/13 职场文书