Question

我是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>

Answer 1

对于基本的客户端验证，请从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>元素（初级技能级别）动态地执行此操作。

UPDATE ...在您展示了一些代码之后：）

您需要在HTML中的正文之后放置<script>标记。执行document.getElementById("title")时，它保持为null，因为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>

Answer 2

您可以（暂时;仅在客户端）将用户输入存储在javascript变量中。创建一个容器（div）并使用Javascript HTML DOM API以所需的值更新它。

以下是w3schools的JavaScript DOM参考指南： http://www.w3schools.com/jsref/

Answer 3

您可能希望尝试查看JQuery以获得一种简单的方法。您正在做的很简单，您可能不需要JQuery，但会使学习更简单。

这是一个快速的jsFiddle给出一个简短的例子，从文本框中获取值并将它们附加到另一个元素。

http://jsfiddle.net/Tvcnx/

HTML：

<label>Enter you name:</label><input id="name" type ="text"/><br/>
<h1 id="message"></h1>

使用Javascript：

$( document ).ready(function() {
    $('#name').change(function(){
        $('#message').html('Hello ' + $('#name').val());
    });
});

以下是使用jQuery轻松获取值的文档：

http://api.jquery.com/val/

同样不需要jQuery，但由于你看起来很新，它可能会更容易。

Answer 4

以下是从w3schools中获取的完整示例，其中显示了如何完成您想要的任务。如果您想保存用户输入以便稍后向用户显示，请查看tutorial about cookies。

<!DOCTYPE html>
<html>
<body>

<p>Click the button to demonstrate the prompt box.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x;

var person=prompt("Please enter your name","Harry Potter");

if (person!=null)
  {
  x="Hello " + person + "! How are you today?";
  document.getElementById("demo").innerHTML=x;
  }
}
</script>

</body>
</html>

如何在HTML页面上向用户显示输入？

4 个答案: