Question

所以我有一个带有keypress事件监听器的HTML表单，记录按下的键的charCode，然后将charCode转换为与该键相关的字母的字符串。< / p>

每次在表单中输入一个字母时，都会在input_array[]中创建一个新条目。

我将字母表中的每个字母作为SVG存储在我的main.js文件的不同部分的JS变量中，我希望能够读取input_array[]中存储的字母，然后显示表单提交后，SVG将在新页面上与该字母相对应。

我已尝试使用以下方法从数组中提取数据，但它在第一次按键时触发，因此我无法获取所有数组数据然后显示4个字母。我也觉得必须有一种更有效的方式。

var letter_one = input_array[0];
var letter_two = input_array[1];
var letter_three = input_array[2];

这是JSFiddle，以显示我尝试做的基本版本。如果您打开控制台，您将看到如何创建input_array[]。

我对这种语言还很陌生，所以任何帮助都会非常感激。

Answer 1

如你所料，这比你做的简单得多：）

提交表单后，您只需从输入中获取值：

function handleSubmit() {
  var val = document.getElementById('user_input').value;
  validate(val);
  console.log(val);
  var letter_one = val[0];
  var letter_two = val[1];
  var letter_three = val[2];
  var letter_four = val[3];
  return false; // stops POST for dev
}

https://jsfiddle.net/1htpm6ag/

话虽如此，如果您实际上是在POST上执行此操作，那么在您发布的页面上，您必须从POSTed表单数据中获取此信息，这完全不同。您是在尝试在客户端JS或POST处理程序中执行此操作吗？

Answer 2

如果我理解你的话听起来像你想要做的那样。

在第1页上，用户将文本输入文本字段。
在提交时将该文本发送到第2页。
在第2页上将该文本转换为字母数组，以与要显示的SVG路径相关联。

如果是上述情况，则需要少得多的javascript。

第1页：只有您的表单包含文本框和提交按钮，以便使用GET方法将数据提交到下一页。
第2页：在这里，您将需要Javascript来检索发送的数据并将其处理到您的字母数组中。我也会过滤非字母字符。

我在下面的代码中创建了一个示例表单，该表单提交给自己，然后javascript脚本标记将从url中提取变量并将其处理为字母数组。在您的情况下，您可以将Javascript移动到第2页。

<script type="text/javascript">
    (function(){
      function getParamValue(param) {
          var urlParamString = location.search.split(param + "=");
          if (urlParamString.length <= 1) return "";
          else {
              var tmp = urlParamString[1].split("&");
              return tmp[0];
          }
      }
      function isLetter(c) {
        return c.toLowerCase() != c.toUpperCase();
      }

      var user_input = getParamValue('user_input');
      var char_array = null;
      if(user_input !== ''){
        char_array = user_input.split("");
        char_array = char_array.filter(isLetter);
        for(var i in char_array){
          console.log('Char ' + i + ' = ' + char_array[i]);
        }
      }
    })();
  </script>
  <body>
    <form id="user_form" class="" action="?" method="GET">
      <input type="text" name="user_input" />
      <input type="submit" value="submit">
    </form>
  </body>

在HTML表单提交（keypress event）之后从数组中提取数据

2 个答案: