Question

简单的JavaScript。

var userName = prompt ("What's your name?");
document.write ("Hello " + userName + ".");

有没有其他方法来获取用户的输入（名称）而不是通过弹出框？我如何在网站中实现文本框以获取用户名？

这是怎么回事？

<section class="content">
<input id="name" type="text">
<button onclick="userName()">Submit</button>
<p id="user"></p>
<script>
function userName() {
var name = document.getElementById("name").value;
user.innerHTML = "Hello" + " " + name}
</script>
</section>

Answer 1

用于创建文本字段和按钮的简单HTML：

<input id="name" type="text">
<button onclick="go()">Go</button>

单击按钮时调用的简单脚本：

function go() {
    var text = document.getElementById("name").value;
    alert("The user typed '" + text + "'");
}

工作演示：http://jsfiddle.net/jfriend00/V74vV/

简而言之，您将数据输入字段放入页面。然后，您将事件处理程序连接到某种用户事件（如单击按钮），然后在该代码中，您从数据输入字段中获取值，并使用它执行任何操作。

如果您想了解所有不同类型的input代码，请阅读here。

您可能还想了解document.getElementById("xxx")，它允许您在页面中找到已为其分配ID的元素，然后从中获取属性。

Answer 2

我最近写完了一个JS迷你库，iocream.js就是这么做的。

使用iocream.js，您的代码将如下所示：

<script src=".../iocream.js"></script>              <!-- include the library -->
<pre id="io_operations"></pre>                      <!-- the JAR/hub of I/O -->
<script>
var jar = new IOCream('io_operations');
function ask_name() {
    jar.jin(say_hello, 'Please enter your name: '); // jin is read like C++'s cin
    // say_hello is a CALLBACK FUNCTION which will
    // triggered on the user's input, when available.
}
function say_hello(name) {
    jar.jout('Hello ' + name + '.');               // again, read like C++'s cout
}
ask_name();
</script>

所有输入/输出操作都发生在PRE元素中，其元素必须提供给IOCream构造函数。有选项可以设置颜色方案。或者，您可以使用CSS完全设置PRE元素的样式。

您可以在this bitbucket repo和示例here找到文档。

Answer 3

是的，这是可能的。

您可以将onChange应用于文本框或

如果与按钮结合使用，则可以使用onClick或

如果文本框位于表单内，则onsubmit也可以替代。

Answer 4

<input id='txtUserName' type='text' />


<input onclick='getValue()' type='button' value='ok'>


function getValue(){
   var userName = document.getElementById('txtUserName').value;
   document.write(userName);
}

Javascript Prompt（）替代方案

4 个答案: