使用纯javascript检测更改的输入文本框[重复]
Posted
技术标签:
【中文标题】使用纯javascript检测更改的输入文本框[重复]【英文标题】：Detect changed input text box using pure javascript [duplicate] 【发布时间】：2015-02-01 11:50:29 【问题描述】：如果输入文本框被更改（用户已停止输入），我会尝试使用 javascript 分离，以便我可以验证表单并在需要时显示错误消息。我知道它可以使用 jQuery 来完成，但我希望用纯 javascript 来完成。
http://jsfiddle.net/xstqLkz4/2/
上面的链接使用jQuery演示了它
我没有太多代码。我不知道从哪里开始。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript validate</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<script src="domready.js"></script>
<script>
DomReady.ready(function()
(function ()
var Username = document.getElementById("Username");
var Password = document.getElementById("Password");
var DOB = document.getElementById("DOB");
var Email = document.getElementById("Email");
var Country = document.getElementById("Country");
if (Username.length <= 5)
alert("Less then 5");
)();
);
</script>
<style>
body
font-family: 'Lato', sans-serif;
position: absolute;
label
font-size: 1.2em;
margin-right: 5px;
input[type='text'], input[type='password']
border: none;
padding: 7px;
background-color: rgba(242, 240, 240, 1);
font-family: 'Lato', sans-serif;
font-size: 0.85em;
font-weight: 100;
input[type='password'], input[type='text'], input[type='submit']
margin-top: 18px;
input[type='password']
margin-left: 32px;
input[type='submit']
padding: 10px 119px;
background-color: #F2F0F0;
border: medium none;
font-family: "Lato",sans-serif;
margin-top: 24px;
font-size: 1.4em;
font-weight: 500;
#wrp
width: 800px;
position: relative;
left: 438px;
top: 32px;
#Username
margin-left: 25px;
#DOB
margin-left: 3px;
#Email
margin-left: 70px;
#Country
margin-left: 43px;
.errortxt
color: rgba(206, 145, 145, 1);
.error
background-color: rgba(242, 228, 228, 1);
</style>
</head>
<body>
<div id="wrp">
<form action="">
<div>
<label for="Username">Username</label>
<input type="text" id="Username">
</div>
<div>
<label for="Password">Password</label>
<input type="password" id="Password">
</div>
<div>
<label for="DOB">Date of birth</label>
<input type="text" id="DOB">
</div>
<div>
<label for="Gender">Gender</label>
<div>
<label for="Male">Male</label>
<input type="radio">
<label for="Female">Female</label>
<input type="radio">
</div>
</div>
<div>
<label for="Email">Email</label>
<input type="text" id="Email">
</div>
<div>
<label for="Country">Country</label>
<input type="text" id="Country">
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：jsFiddle 看起来很简单（虽然时间可能有点短）。
这段代码...
$("#input").on("input" ...
... 似乎表明它正在单个 <input> 标记上运行。您可能希望将其转移到一个类并在 alert() 触发的位置执行验证。
【讨论】：
我希望不使用 jQuery。 在这里查看答案***.com/questions/19655189/… 谢谢你，这解决了我的问题:)以上是关于使用纯javascript检测更改的输入文本框[重复]的主要内容，如果未能解决你的问题，请参考以下文章
用JS限制文本框只能输入数字，并给予提示，（纯JavaScript）