当前位置: 首页 > 编程笔记 >

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

霍伟彦
2023-03-14
本文向大家介绍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程序设计有所帮助。

 类似资料:
  • 说明:需要监听的页面中遵守聊天页面代理“NtalkerChatDelegate”,打开聊窗时设置NtalkerChatParams的代理属性,如 NtalkerChatParams *chatParems = [[NtalkerChatParams alloc] init]; chatParems.delegate = self;//聊天页面代理 1.未读消息的监听 用途:用于监听访客不在聊窗页

  • 一、未读消息的监听 二、url点击事件的监听

  • 文本框可以让用户输入文本。它们可以是单行的,带或不带滚动条,也可以是多行的,并且带有一个图标。点击文本框后显示光标,并自动显示键盘。除了输入,文本框可以进行其他任务操作,如文本选择(剪切,复制,粘贴)以及数据的自动查找功能。详情见 模式 > 选择 文本选择的设计。 文本框可以有不同的输入类型。输入类型决定文本框内允许输入什么样的字符,有的可能会提示虚拟键盘并调整其布局来显示最常用的字符。常见的类型

  • 在用户输入过程中,TextBox会发送onChange事件,可以监听这个事件来处理用户的输入,包括获取数据、校验数据; <label class="field-label">我是</label> <div id="textbox1" class="ui-textbox"> <input type="text"> </div> <div id="welcome">你好</div> req

  • 文本框脚本 在HTML中,文本框的表现形式有两种:一种是使用 <input>元素且它的type属性值为"text"来表示 单行文本框。二种是使用 <textarea>和</textarea>表示 多行文本框。 要表示单选文本框,可以使用<input>元素且其type属性值为“text”。通过 size设置文本框中能够显示的字符数,通 value设置文本框的初始值,通过 maxlength设置可以接

  • 本文向大家介绍JavaScript监听和禁用浏览器回车事件实例,包括了JavaScript监听和禁用浏览器回车事件实例的使用技巧和注意事项,需要的朋友参考一下 js监听浏览器回车事件,可以支持ie6+,火狐,谷歌等浏览器。 那么,如何捕捉指定DOM对象的回车事件?这里以input标签为例说明: 那么,js如何禁用浏览器回车事件?我们知道,在HTML表单区域内,按回车时浏览器的默认行为是自动提交表单