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向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
前端性能优化及技巧
May 06 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
公众号SVG动画交互实战代码
May 31 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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 字符串操作入门教程
2006/12/06 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php 获取全局变量的代码
2011/04/21 PHP
基于php 随机数的深入理解
2013/06/05 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
理解javascript回调函数
2014/12/28 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
介绍Python中内置的itertools模块
2015/04/29 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Python同时处理多个异常的方法
2020/07/28 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
Python用户自定义异常的实现
2020/12/25 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
机械制造与自动化应届生求职信
2013/11/16 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
小学语文复习计划
2015/01/19 职场文书
2016年清明节寄语
2015/12/04 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js