脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript监听文本框回车事件并过滤文本框空格

JavaScript监听文本框回车事件并过滤文本框空格的方法

 更新时间：2015年04月16日 10:27:31   作者：lele  
这篇文章主要介绍了JavaScript监听文本框回车事件并过滤文本框空格的方法,涉及javascript操作文本框获取、清空及删除空格的技巧,需要的朋友可以参考下

本文实例讲述了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开发IE浏览器本地插件实例

    使用JavaScript开发IE浏览器本地插件实例

    这篇文章主要介绍了使用JavaScript开发IE浏览器本地插件实例,本文讲解使用JS+注册表的方式开发一个IE浏览器本地插件,需要的朋友可以参考下
    2015-02-02
  • 几行js代码实现自适应

    几行js代码实现自适应

    本文主要介绍了使用js获取隐藏元素宽高的解决方案以及代码思路，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • onsubmit阻止form表单提交与onclick的相关操作

    onsubmit阻止form表单提交与onclick的相关操作

    return false会阻止表单提交，基本上关于onsubmit=return false有以下几点要注意的地方，学习后台编程的朋友一定要知道。
    2010-09-09
  • js实现拖拽效果（构造函数）

    js实现拖拽效果（构造函数）

    这篇文章主要介绍了js利用构造函数实现拖拽效果
    2015-12-12
  • JS获取单击按钮单元格所在行的信息

    JS获取单击按钮单元格所在行的信息

    这篇文章主要介绍了用JS获取表格中单击某个单元格中按钮，得到所在行的信息,需要的朋友可以参考下
    2014-06-06
  • 微信小程序商城项目之淘宝分类入口(2)

    微信小程序商城项目之淘宝分类入口(2)

    这篇文章主要为大家详细介绍了微信小程序实战商城系列之淘宝分类入口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • js实现div弹出层的方法

    js实现div弹出层的方法

    这篇文章主要介绍了js实现div弹出层的方法,以实例的形式完整的实现了js弹出div层的效果,并且弹出层可拖拽、可关闭,用户还可根据个人喜好自定义弹出层的显示效果,非常具有实用价值,需要的朋友可以参考下
    2014-11-11
  • 防止网站内容被小偷采集的js代码

    防止网站内容被小偷采集的js代码

    防止网站内容被小偷采集的js代码...
    2006-09-09
  • JS项目中对本地存储进行二次的封装的实现

    JS项目中对本地存储进行二次的封装的实现

    这篇文章主要介绍了JS项目中对本地存储进行二次的封装,这里我们将要使用到的key存储下来，新建一个叫constant-storage.js的文件，对外暴露一些key的键名，也方便后期统一修改，这里因为都是恒量，所以名称我们都用大写表示，需要的朋友可以参考下
    2022-07-07
  • JS实现左右无缝轮播图代码

    JS实现左右无缝轮播图代码

    这篇文章主要介绍了JS实现左右无缝轮播图代码的相关资料,小编看本段代码非常不错，具有参考借鉴价值，特此分享脚本之家平台，需要的朋友可以参考下
    2016-05-05

最新评论