![threeletter]( "threeletter")
本文介绍了如何在HTML页面上将输入显示回用户？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我是HTML新手，我试图创建一个脚本在消息框中显示用户输入。我创建了一个文本框并使用正则表达式（仅限字母表）对其进行了验证。 现在我需要在页面中显示用户输入。我怎么能用JavaScript做到这一点？ 我需要在页面中显示所有的用户输入。我需要在一个容器中显示两个字母字，在另一个容器中显示三个字母字。 b $ b < html> < head> < style type =text / css> < / style> < script type =text / javascript> 函数Allow（）{ if（！user.title.value.match（/ [a-zA-Z] $ /）&& user.title.value！=）{ user.title.value =; alert（请只输入字母）; } } var titles = []; var titleInput = document.getElementById（title）; var messageBox = document.getElementById（display）; 函数insert（）{ titles.push（titleInput.value）; clearAndShow（）; 函数clearAndShow（）{ //清除我们的字段 titleInput.value =; //显示我们的输出 messageBox.innerHTML =; messageBox.innerHTML + =Titles：+ titles.join（，）+< br />; < / script> < / head> < body> < p>表格输入< / p> < form name =useraction =onsubmit =method =post> 用户<输入id =标题type =textmaxlength =4onkeyup =允许（）> < input type =submitvalue =Save / Showonclick =insert（）/> < / form> < div id =display>< / div> < / form> < / body> < / html> 解决方案对于基本的客户端验证， code> 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无法写入文件。 要使用带有Javascript的Ruby或PHP，您可以使用Ajax请求（中级技能级别）提交一个< form> 元素（初学者技能水平）。 您需要将< script> 标签在之后HTML中的主体完成。当您执行 document.getElementById（title）时，它将保持为空，因为HTML没有完成呈现！ < html>< head>< / head><体> < input id =titletype =textmaxlength =4onkeyup =Allow（）> < input type =submitvalue =Save / Showonclick =insert（）/> < div id =display>< / div> < script type =text / javascript> var titles = []; var titleInput = document.getElementById（title）; var messageBox = document.getElementById（display）; 函数Allow（）{ if（！user.title.value.match（/ [a-zA-Z] $ /）&& user.title.value！= ）{ user.title.value =; alert（请只输入字母）; } } 函数insert（）{ titles.push（titleInput.value）; clearAndShow（）; } 函数clearAndShow（）{ titleInput.value =; messageBox.innerHTML =; messageBox.innerHTML + =Titles：+ titles.join（，）+< br />; } < / script> < / body> < / html> 您的代码没有包含关于双字母容器和三字母容器所以我最好能在那里再次推荐 substr（）。 最后更新 以下是两个和三个字母字符串的基本实现，输入使用逗号分隔，如 foo，bar，fo，ba ： < html>< head><头><身体GT; < input id =titletype =text> < input type =submitvalue =Save / Showonclick =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）; 函数clearAndShow（）{ //用逗号分隔输入框的值 titles = titleInput.value.split（，）; //重置显示div div display2letter.innerHTML =; display3letter.innerHTML =; //缓存长度，因此在每次迭代时都不会重新计算。 var len = titles.length; var twoletter = []; var threeletter = []; for（i = 0; i< len; i ++）{ //检查az，AZ，长度2或3 if（！titles [i]。匹配（/ ^ [a-zA-Z] {2,3} $ /））{抛出新错误（请只使用字母。）; 休息; } //转储到存储阵列中。 if（titles [i] .length == 2）{ twoletter.push（titles [i]）; } else { threeletter.push（titles [i]）; } } display2letter.innerHTML + =标题，2个字母：+ twoletter.join（，）+< br />; display3letter.innerHTML + =标题，3个字母：+ threeletter.join（，）+< br />; } < / script> < / body> < / html> I am new to HTML and I am trying to create a script to display user input in a message box. I have created a textbox and validated it with a regular expression (alphabet only).Now I need to display the user input in the page itself. How can I do this with JavaScript?I need to display all the user inputs in the page itself. I need to display the two letter word in one container and three letter word in another container.This is the code I tried.<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> 解决方案 For a basic client-side validation, start with document.getElementById('foo') and HTML formed like <input id='foo' value='bar' />. You can validate and repopulate using .value, somthing like this:var foo = document.getElement('foo');if (foo.value.match('your regex')) { foo.value = foo.value.substr(0, 3);}For server-side saving and validation, unfortunately you can't do this with only Javascript.Javascript is client-side, which means it's trapped inside your browser.To send values back to the server, you need something like PHP or Ruby to receive POSTed form values and write them to a file. Javascript can't write to files for security reasons.To use Ruby or PHP with Javascript, you could do it dynamically with an Ajax request (intermediate skill level) or by submitting a <form> element (beginner skill level).UPDATE...after you showed some code :)You need to put the <script> tag after the body in the HTML is finished. When you do document.getElementById("title"), it stays null because the HTML isn't finished rendering!Otherwise, you did everything right. Here's your code, a little cleaner, and working.<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>Your code didn't include the part about the "two letter container" and the "three letter container" so the best I can do there is recommend substr() again.LAST UPDATEHere's a basic implementation of two and three letter strings, input delimited using commas like 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> 这篇关于如何在HTML页面上将输入显示回用户？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 09-02 12:02