我是 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 之类的工具来接收 POST
ed 形成值并将它们写入文件。出于安全原因,Javascript 无法写入文件。
要将 Ruby 或 PHP 与 Javascript 结合使用,您可以通过 Ajax 请求(中级技能水平)或提交 <form>
来动态执行此操作。元素(初级技能水平)。
更新...在您展示了一些代码之后:)
您需要输入 <script>
HTML 中的正文完成后标记。当你这样做时document.getElementById("title")
,它保持为空,因为 HTML 尚未完成渲染!
否则,你做的一切都是对的。这是您的代码,稍微干净一点,并且可以工作。
<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>
关于javascript - 如何在 HTML 页面上向用户显示输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19443834/