Question

通过将值写入标记，可以将值从javascript传递给html。但是，如果我希望将用户定义的值（由查看网页的人输入的等等）传递给java脚本，那么我可以用它做什么，最简单的方法是什么？

目前，我有这样的事情：

 <div class="entry foreground-color">
     <form>
         <input type="text" name="commands" size="60"/>
     </form>
 </div>

如何将表单中的值传递给我的javascript？

或者，我是否朝着完全错误的方向前进？如果是这样，获取用户输入的正确方法是什么，并将其传递给javascript？

编辑：对我滥用术语表示歉意。我正在制作一个基于文本的冒险游戏，我希望用户能够输入一个响应，按回车键，然后将响应发送到javascript，这样我就可以使用javascript来评估响应（等“go south” ，“去北方”），并用新的情况写回元素（等“当你往南方时，你找到了一个巨魔”）。

Answer 1

您可以停止提交表单并获取值：

<强> HTML ：

<div class="entry foreground-color">
    <form onsubmit="return getValue('commands')">
        <input type="text" name="commands" size="60" id="commands"/>
    </form>
</div>

<强>的JavaScript ：

function getValue (id) {
    text = document.getElementById(id).value; //value of the text input
    alert(text);
    return false;
}

小提琴： Fiddle

如果您想在之后清除该框，请使用：

document.getElementById(id).value = '';

像这样：

function getValue (id) {
    text = document.getElementById(id).value; //value of the text input
    alert(text);
    document.getElementById(id).value = '';
    return false;
}

Answer 2

<input type="text" name="commands" size="60" id="commands"/>   

var input = document.getElementById("commands").value;

或

  document.getElementsByName( "commands" )[0].value

现在对此做任何事情

Answer 3

输入值已通过DOM API用于Javascript：

document.getElementsByName( "commands" )[0].value

Answer 4

您可以使用以下方式获取输入控件的值：

document.getElementsByName("commands")[0].value;

由于getElementsByName()方法返回Array具有指定名称的元素，因此您需要使用 first 元素，假设只有一个 name属性commands的元素。

除此之外，为了简单和独特，我建议您使用着名的方法来使用id属性和getElementById()方法来实现这一点。

Answer 5

要获取HTML元素的值，首先需要获取所需的元素（可以使用这些方法）：

的getElementById
的getElementsByTagName
getElementsByClassName方法
querySelector（现代浏览器）
querySelectorAll（现代浏览器）

这些方法取决于document（documentation）。

所以在你的情况下你可以尝试这样的事情：

var inputs = document.getElementsByTagName('input'),
    commandValue = null;
for (var i = 0; i < inputs.length; i++) {
 if (inputs[i].name === "commands") {
    commandValue = inputs[i].value; // get the element value
 }
}
alert (commandValue); // show the value

但是您需要在表单默认操作上设置“捕手”。所以：

<form>

成为：

<form onsubmit="return getValue()">

然后在getValue函数中设置上面的javascript代码：

function getValue() {
    var inputs = document.getElementsByTagName('input'),
        commandValue = null;
    for (var i = 0; i < inputs.length; i++) {
     if (inputs[i].name === "commands") {
        commandValue = inputs[i].value; // get the element value
     }
    }
    alert (commandValue); // show the value
    return false; // prevent default form action
};

Answer 6

你走在正确的道路上:)）

例如，您可以执行以下操作（请参阅http://jsfiddle.net/ahLch/）：

HTML：

<h1 id="commandsExample"></h1>
<div class="entry foreground-color">
   <form>
     <input type="text" id="commands" size="60"/>
   </form>
</div>

JavaScript的：

var input = document.getElementById('commands');
var example = document.getElementById('commandsExample');

input.addEventListener('change', function () {
   example.innerHTML= input.value;
});

有几点需要注意：

如果您不熟悉JavaScript，并且希望将代码设置为跨浏览器（特别是如果您想要定位旧版本的IE），请查看jQuery。
如果您希望学习如何在没有jQuery层的情况下使用浏览器提供的普通DOM API，请查看：http://youmightnotneedjquery.com/（一旦您学习了jQuery基础知识，它就非常有用）。
有两种方法可以获得价值：
- 拦截submmit事件：我不推荐它，你必须注意避免默认的提交行为，你必须在输入字段周围创建一个表单。这在旧浏览器中是必要的，但今天不是。
- 更改事件：当输入值发生变化并且输入失去焦点时（通常用于表单验证的事件），它会被触发。
- keydown 和 keyup ：它们通过捕获每次击键为您提供更多控制，但它的级别低于更改事件。有关完整参考，请参阅：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
使用“id”代替“name”。仅当您想要提交值时才需要名称，在新浏览器中，您可以只输入不带表单的输入标记。

Answer 7

使用jQuery获取输入标记的值非常简单。（我认为你无论如何都要通过AJAX将消息发送到服务器......？）

$（ “＃idofinput”）VAL（）。将复制值$（“＃idofinput”）。val（''）;将它清空。

您可能希望在不提交表单的情况下执行此操作。在javascript中重新创建一个并不难。对于提交输入，您可以使用以下内容：

function checkEnter(e)
{
  var keynum;
  if(window.event) // IE8 and earlier
  {
   keynum = e.keyCode;
  }
  else if(e.which) // IE9/Firefox/Chrome/Opera/Safari
  {
    keynum = e.which;
  }
  if(keynum==13)
  {
    sendMessage();
  }
}

如何将用户输入的表单值从html传递给javascript？

7 个答案: