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小问题说明
Sep 26 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
vue实现弹幕功能
2019/10/25 Javascript
python通过yield实现数组全排列的方法
2015/03/18 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python3 replace()函数使用方法
2018/03/19 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
标记环介质访问控制协议
2016/03/27 面试题
紧急通知
2015/04/17 职场文书
校园安全主题班会
2015/08/12 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
Python语言中的数据类型-序列
2022/02/24 Python
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android