不使用 <input type="text"> 创建输入文本框答案

【问题标题】：Create a input textbox without using <input type="text">不使用 <input type="text"> 创建输入文本框
【发布时间】：2011-12-28 01:23:14
【问题描述】：

我想创建一个不需要<input type="text"> 表单元素的输入文本框。用户仍然可以在此文本框中键入文本，并且仍然可以使用 Javascript/jQuery 检索该值。这样做的原因是因为这个文本框将是一个表单，在提交时，所有表单输入值都将被发送到服务器端进行处理，并且有这个文本框我不希望它的值自动发送到服务器端.

问题：在不依赖 HTML 表单元素input 的情况下创建这样一个文本框的最佳方法是什么？

【问题讨论】：

以另一种形式创建输入。
去掉文本输入的边框和轮廓，作为独生子放在一个div中。

标签： javascript jquery html css forms

【解决方案1】：

只是不要给<input type="text"> 标记一个name 属性，它就不会提交。这是一个例子：

<input type="text" id="myinput" value="you will not see this submitted" />

【讨论】：

这是 OPs 问题的正确答案。不使用输入标签来创建文本框是愚蠢的。

【解决方案2】：

$("#form").bind('submit', function() {
  $(this).children('input[name=excludethisfield]').attr('disabled', true);
});

我知道这不是您具体要求的，但可能是最简单的方法。

【讨论】：

我看不出这有什么作用。无论如何，用户在点击提交按钮后都不会编辑表单输入字段。
@Asaph disabled 属性将导致它无法发布。

【解决方案3】：

你也可以使用 contenteditable div。

来自 MDN：

<!DOCTYPE html>
<html>
  <body>
    <div contenteditable="true">
      This text can be edited by the user.
    </div>
  </body>
</html>

http://html5demos.com/contenteditable

【讨论】：

+1 这也是我想说的，但请注意，这并不适用于所有浏览器。
它适用于所有主要的桌面浏览器。但缺乏移动支持。

【解决方案4】：

只创建输入，不要给它name 或id。

【讨论】：

你仍然可以给它一个id 属性。只有当它具有name 属性时才会被提交。

【解决方案5】：

您可以使用textarea 代替input。然后用css应用stlying。你也可以使用你的输入标签，只要把它放在<form></form>之外，它就不会被发送到服务器。

【讨论】：

【解决方案6】：

如果您通过 jQuery 创建动态 <input type="text"> - 它会回发其值。

如果它的值被回发，你关心什么？只是不要在服务器端对它们做任何事情。

或者，

提交前 - 将类型从输入更改为标签。 ( + 保存值)

或者，

如果您将输入添加到 FORM 元素之外 - 它不会提交。

【讨论】：