我是HTML的新手,我正在尝试创建一个脚本以在消息框中显示用户输入.我创建了一个文本框并使用正则表达式验证它(仅限字母).
现在我需要在页面本身中显示用户输入.我怎么能用JavaScript做到这一点？
我需要在页面本身中显示所有用户输入.我需要在一个容器中显示两个字母的单词,在另一个容器中显示三个字母的单词.
这是我试过的代码.
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">
function Allow() {
if (!user.title.value.match(/[a-zA-Z]$/) && user.title.value != "") {
user.title.value = "";
alert("Please Enter only alphabets");
}
}
var titles = [];
var titleInput = document.getElementById("title");
var messageBox = document.getElementById("display");
function insert( ) {
titles.push(titleInput.value);
clearAndShow();
}
function clearAndShow() {
// Clear our fields
titleInput.value = "";
// Show our output
messageBox.innerHTML = "";
messageBox.innerHTML += "Titles: " + titles.join(", ") + "<br/>";
</script>
</head>
<body>
<p>form input</p>
<form name="user" action="" onsubmit=" " method="post">
User<input id="title" type="text" maxlength="4" onkeyup=" Allow() " >
<input type="submit" value="Save/Show" onclick=" insert() " />
</form>
<div id="display"></div>
</form>
</body>
</html>
对于基本的客户端验证,首先要document.getElementById('foo')和HTML一起构成<input id='foo' value='bar' />.您可以使用以下方式验证和重新填充.value:
var foo = document.getElement('foo');
if (foo.value.match('your regex')) {
foo.value = foo.value.substr(0, 3);
}
对于服务器端保存和验证,遗憾的是,只有Javascript才能执行此操作.
Javascript是客户端的,这意味着它被困在浏览器中.
要将值发送回服务器,您需要PHP或Ruby之类的东西来接收POSTed表单值并将它们写入文件.出于安全原因,Javascript无法写入文件.
要将Ruby或PHP与Javascript一起使用,您可以使用Ajax请求(中级技能级别)或通过提交<form>元素(初级技能级别)动态地执行此操作.
更新 ...你显示一些代码:)
您需要在HTML中的正文完成后放置<script>标记.当你这样做时,它保持为null,因为HTML没有完成渲染!document.getElementById("title")
否则,你做的一切都是正确的.这是你的代码,更干净,更有效.
<html><head></head><body>
<input id="title" type="text" maxlength="4" onkeyup="Allow()" >
<input type="submit" value="Save/Show" onclick="insert()" />
<div id="display"></div>
<script type="text/javascript">
var titles = [];
var titleInput = document.getElementById("title");
var messageBox = document.getElementById("display");
function Allow(){
if (!user.title.value.match(/[a-zA-Z]$/) && user.title.value !="") {
user.title.value="";
alert("Please Enter only alphabets");
}
}
function insert () {
titles.push(titleInput.value);
clearAndShow();
}
function clearAndShow () {
titleInput.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "Titles: " + titles.join(", ") + "<br/>";
}
</script>
</body>
</html>
您的代码中没有包含关于"双字母容器"和"三字母容器"的部分,因此我可以substr()再次推荐.
最后更新
这是两个和三个字母字符串的基本实现,使用逗号分隔输入foo,bar,fo,ba:
<html><head></head><body>
<input id="title" type="text" >
<input type="submit" value="Save/Show" onclick="clearAndShow()" />
<div id="display2letter"></div>
<div id="display3letter"></div>
<script type="text/javascript">
var titleInput = document.getElementById("title");
var display2letter = document.getElementById("display2letter");
var display3letter = document.getElementById("display3letter");
function clearAndShow () {
// Split input box value by comma
titles = titleInput.value.split(",");
// Reset display divs
display2letter.innerHTML = "";
display3letter.innerHTML = "";
// Cache length so it's not recalculated on each iteration.
var len = titles.length;
var twoletter = [];
var threeletter = [];
for (i = 0; i < len; i++) {
// Check for a-z, A-Z, length 2 or 3
if (!titles[i].match(/^[a-zA-Z]{2,3}$/)) {
throw new Error("Please use only alphabet letters.");
break;
}
// Dump into storage arrays.
if(titles[i].length == 2) {
twoletter.push(titles[i]);
}
else {
threeletter.push(titles[i]);
}
}
display2letter.innerHTML += "Titles, 2 letters: " + twoletter.join(", ") + "<br/>";
display3letter.innerHTML += "Titles, 3 letters: " + threeletter.join(", ") + "<br/>";
}
</script>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
37519 次 |
| 最近记录： |