2

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

4 回答 4

6

对于基本的客户端验证，以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>放置标签。当你这样做时，它保持为空，因为 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>
于 2013-10-18T07:26:57.183 回答
1

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

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

于 2013-10-18T07:29:34.117 回答
0

您可能想尝试研究 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 不是必需的，但由于您看起来很新，它可能会更容易。

于 2013-10-18T07:29:58.483 回答
-2

这是一个来自w3schools的完整示例，它展示了如何完成您想要的。如果您想保存用户输入以便稍后将其显示给用户，请查看有关 cookie 的教程。

<!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>
于 2013-10-18T07:39:36.913 回答