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 相关文章推荐
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
js弹出对话框方式小结
Nov 17 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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 中文乱码解决办法总结分析
2009/07/30 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
React注册倒计时功能的实现
2018/09/06 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
使用pandas read_table读取csv文件的方法
2018/07/04 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python数据预处理方式 :数据降维
2020/02/24 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
大客户销售经理职责
2013/12/04 职场文书
入党自我鉴定
2014/03/25 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
MySQL慢查询优化解决问题
2022/03/17 MySQL
详解pytorch创建tensor函数
2022/03/22 Python