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 学习笔记 选择器之三
Jul 23 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
JS中去掉array中重复元素的方法
May 26 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php 在线打包_支持子目录
2008/06/28 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
vue组件生命周期详解
2017/11/07 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
python自定义异常实例详解
2017/07/11 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
python将字符串转换成json的方法小结
2019/07/09 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
代理协议书
2014/04/22 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
博士导师推荐信
2015/03/25 职场文书
大学校园招聘会感想
2015/08/10 职场文书
python实现过滤敏感词
2021/05/08 Python
Nginx配置之禁止指定IP访问
2022/05/02 Servers