表单输入字段未清除。这个“内部编辑器”Shadow DOM 来自哪里？

Question

这是我将在这个问题中使用的简单表格...

<form method="get">
	<input type="text" value="test">
</form>

在这里或在 jsfiddle 上运行良好。请注意，如果您单击“运行代码 sn-p”并单击该字段，那么文本将如何与光标一起保留在该字段中？

但是，在我的自定义 WordPress 网站上，该字段的值的行为类似于 占位符 值。希望这些图片能说明我的意思。

当我在该字段中单击时，现有文本会消失...

...当我点击离开该字段时，它会重新出现...

您可以从上面的 HTML 表单中看到，该字段已分配了一个值，并且 没有 有一个占位符。我的第一个想法是必须在运行时通过 javascript 动态分配一些占位符值。但是，Safari 的网络检查器显示了这一点……

看起来它不是占位符，而是添加了一些 Shadow DOM 代码，并且新代码使其功能类似于占位符。为了查看 Shadow DOM 代码，我在 Chrome 的网络检查器中启用了 Shadow DOM。这是我发现的。

当该字段未突出显示时，Shadow DOM 会显示...

当我单击该字段以突出显示它时，Shadow DOM 会显示...

似乎有些东西正在创建一个影子根并将这个 div 添加到它...

<div id="inner-editor"></div>

然后它会根据高亮状态将该 div 的 innerHTML 设置为 "" 或 "test"。

我不经常使用 Shadow DOM，而且我不确定如何确定这段代码的来源。我已经通过网络检查器搜索了我的整个代码库，并从我的项目的根目录中执行了几个不同的递归 grep（例如 grep -r "inner-editor" *），以尝试在 css、javascript 或 php 中找到任何代码可能会在运行时添加此 Shadow DOM 代码。在我的项目中的任何地方都没有“createShadowRoot”或“inner-editor”或“parent-focus”或“parent-active”或“text-active”的实例。我不确定这些可能来自浏览器代码本身，还是来自我正在使用的某个 js 库（如 jQuery）中的一些混淆代码，或者是对某些库代码的动态浏览器重写。

如何让这个文本字段在我的网站上正常运行，而不是像一个带有占位符值的空文本字段？

感谢您抽出宝贵时间。

Answer 1

在花费数小时禁用和启用 wordpress 插件、更换网站上的 jQuery 库版本并处理伴随的主题兼容性问题之后，我终于在我的主题的 jquery.main.js 文件中找到了有问题的代码行。在这里……

// clear inputs on focus
function initInputs() {
    PlaceholderInput.replaceByOptions({
        // filter options
        clearInputs: true,
        clearTextareas: true,
        clearPasswords: true,
        skipClass: 'default',

        // input options
        wrapWithElement: false,
        showUntilTyping: false,
        getParentByClass: false,
        placeholderAttr: 'value'
    });
}

replaceByOptions 调用了其他几个函数，但修复在上面的布尔设置中可用。将 clearInputs 和 clearTextareas 更改为 false 解决了问题。我希望这可以帮助遇到同样问题的其他人。