HTML表单:如何记住按钮点击的文本值

HTML Form: How to remember text values of button click?

本文关键字：文本 按钮 表单 何记住 HTML      更新时间：2023-09-26

如果您有一个form，请在其中键入一些文本，然后按Enter键，无论何时重新访问该form，您都可以双击输入框并查看过去提交的文本。

我有一个网站，当你按下Enter或单击某个按钮时，它应该接受文本框中的任何内容，并将其用于数据处理。

当不被form包围时，这完全可以工作，但当被form包围时，当你按下Enter键时，它不会起到输入按钮的作用，我相信它会被form覆盖。

我的目标是让用户能够按下Enter键并单击按钮提交数据，但也要记住文本框中的文本值，无论您以何种方式提交数据。

我所拥有的：

<input type="text" id="username-field" class="form-control" placeholder="username">
<input class="btn btn-default" type="button" id="get-name" value="Get Name">

Javascript

$("#get-name").click(function() {
    var name = $("#username-field").val();
    // ... call other function with name ...
});
$("#get-name").keydown(function(e) {
    if (e.which == 13) {
        var name = $("#username-field").val();
        // ... call other function with name ...
    }
");

我想使用的：

<form>
   <input type="text" id="username-field" class="form-control" placeholder="username">
</form>

当按下Enter键时，我尝试执行e.preventDefault()，但这不会记住输入字段中的文本。

我也考虑过做一个小型缓存类型的事情，但不确定该怎么做。

任何帮助都将不胜感激！

谢谢！

  1. 根本不使用form。只是，如果你没有按预期使用它，为什么要添加它
  2. 您要么输入错误提供的代码复制粘贴，要么在脚本中有错误（$("#get-name").val()错误）

  3. 如果您想阻止表单提交，您应该在提交处理程序中使用e.preventDefault()-it，并从中返回false:

    $('#form-id').submit(function (e) {
    e.preventDefault();
    // do smth. else here
    ...
    return false;
})

  4. 使用localStorage为支持HTML5的浏览器保存/检索数据：

    $(function () {
   $('form input[type=text]').doubleclick(function () {
      var id = $(this).attr("id");
      value = localStorage.getItem("form_xxx_" + id);
      // do smth. with cached value, ie:
      if (value != "")
          $(this).val(value); // put in textfield
   });
});
$('form').submit(function (e) {
   $('form input[type=text]').each(function () {
      var id = $(this).attr("id");
      localStorage.setItem("form_xxx_" + id, $(this).val());
   });
   ...
   // all other work
});

注意：请确保不要将某些用户的个人数据放入浏览器的本地存储-_-

相关文章：