javascript - 如何在 HTML 页面上向用户显示输入?

标签 javascript html

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

相关文章:

html - 在 CSS 中添加背景图片的正确方法是什么?

javascript - 当表位于可滚动 div 中时,如何使用 jquery 使表行滚动到 View 中?

javascript - ReactJs 中可重用的模态

javascript - form.serialize() 上的编码问题;一些特殊字符显示为 ASCII 代码

c# - 在页面加载时从隐藏字段中获取 JS 值

javascript - 在博客上的 mathjax 预览中显示新行

html - UL 中的子 Div 被切断

javascript - wookmark 修改和 li 并排和在彼此之下

javascript - 将字符串转换为数组后,我得到错误的数组长度

javascript - 是否可以在 HTML 文件中创建一个可以在同一 HTML 文件中编辑的 Javascript 对象?