Question

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

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

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

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

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

Answer 1

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

Answer 2

也许你的意思是：

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

Answer 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" />

香草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使此操作更简洁。

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

3 个答案:

解决方案

相关