4

简单的 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>
4

4 回答 4

6

一段简单的 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标签，请阅读此处。

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

于 2013-07-02T23:00:09.740 回答
1

我最近完成了一个 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 元素中，其 ID 必须提供给 IOCream 构造函数。有设置配色方案的选项。或者，您可以使用 CSS 完全设置 PRE 元素的样式。

您可以在此 bitbucket 存储库中找到文档，并在此处找到示例。

于 2013-12-14T15:25:44.803 回答
0

对的，这是可能的。

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

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

如果文本框在表单中，onsubmit 也是一种选择。

于 2013-07-02T22:58:30.550 回答
0 
<input id='txtUserName' type='text' />


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


function getValue(){
   var userName = document.getElementById('txtUserName').value;
   document.write(userName);
}
于 2013-07-02T22:59:52.873 回答