将字段输入类型从隐藏更改为文本答案

【问题标题】：Change a field input type from hidden to text将字段输入类型从隐藏更改为文本
【发布时间】：2017-02-13 07:00:01
【问题描述】：

当页面加载时，我正在尝试修改以下页面上几个隐藏字段的输入类型，但是使用以下 jquery 修改当前隐藏字段之一，但没有更新生效：

 $jQ('[name="FirstName"]').prop('type', 'text');

您能否推荐一种替代方法。非常感谢。

您可以在此处找到该页面：

http://www3.sungevity.com/Modernize.html?

【问题讨论】：

标签： jquery forms input

【解决方案1】：

您写的$jQ(...) 必须是jQuery(...) 或$(...)

【讨论】：

谢谢，@Johannes。我将这个 jQuery 脚本移动到它自己的代码部分，只有以下内容，但仍然不会影响 First Name 字段的输入类型::

【解决方案2】：

也许你的意思是这样的：

$('input[name="FirstName"]').prop('type', 'text');

【讨论】：

谢谢@Franco。我也试过了，但不会影响页面更新输入类型的能力。

【解决方案3】：

更改已呈现的HTMLInputElement 的类型有点安全和数据一致性问题，许多浏览器（尤其是 IE 和旧版本的 FF）不允许这种情况发生。这是合理的。

也就是说，某些浏览器（目前正在查看 Chrome 83）确实允许即时更改类型。在不兼容的格式之间进行更改（例如password->number）将清除任何值。将任何内容更改为 hidden 将从文档流中删除输入元素。等等。

如果您能找到任何关于在各种类型对之间转换时究竟发生了什么的文档，请将资源编辑到此处。 change 事件会触发吗？数据会丢失吗？

解决方案

我认为最简单的干净解决方案是创建一个新的input[type="text"] 并将其插入到hidden 输入之后的文档中。然后，将相关的事件侦听器（至少从keyup 和change 开始）添加到可见输入，以立即将编辑后的值传播到隐藏输入。然后在隐藏的输入上触发相同的事件。

这样，任何依赖隐藏输入的代码都将继续正常工作，并且您将添加 UI 来代理隐藏输入的值。

示例 HTML：

<h1>Hidden Input Proxy</h1>
<input id="original_field" type="hidden" value="this is the initial value" />

示例 vanilla JS（添加您自己的错误处理）：

function proxyHiddenInput(inputSelector) {
    const hidden = document.querySelector(inputSelector);
    const proxy = document.createElement('input');
    proxy.type = 'text';
    proxy.value = hidden.value;
    hidden.after(proxy);

    function propagateValue(event) {
        hidden.value = proxy.value;
        hidden.dispatchEvent(new Event(event.type));
        if (event.type !== 'change') {
            hidden.dispatchEvent(new Event('change'));
        }
    }
    
    proxy.addEventListener('keyup', propagateValue);
    proxy.addEventListener('change', propagateValue);
    proxy.addEventListener('blur', propagateValue);

    return proxy;
}

proxyHiddenInput('#original_field');

您可以使用 jQuery 更简洁地实现这一点。