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 相关文章推荐
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
jquery退出each循环的写法
Feb 26 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
JS常用知识点整理
Jan 21 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 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中将数组转成XML格式的实现代码
2011/08/08 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
python实现倒计时的示例
2014/02/14 Python
python连接oracle数据库实例
2014/10/17 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
django中瀑布流写法实例代码
2019/10/14 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
Python如何定义有默认参数的函数
2020/08/10 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
什么是数据抽象
2016/11/26 面试题
区域销售经理职责
2013/12/22 职场文书
给老师的检讨书
2014/02/11 职场文书
班级口号大全
2014/06/09 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
学校食堂标语
2014/10/06 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
2014年个人年终总结
2015/03/09 职场文书
告知书格式
2015/07/01 职场文书