表单输入字段未清除。这个"inner-editor"影子DOM是从哪里来的？

Question

这是我将在这个问题中使用的简单形式...

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

它在这里或在 jsfiddle 上工作正常。请注意，如果您单击 "Run code snippet" 并在字段中单击，那么文本会与光标一起保留在字段中吗？

但是，在我的自定义 WordPress 网站上，该字段的值表现得像 placeholder 值。希望这些图片能够证明我的意思。

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

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

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

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

当字段未突出显示时，阴影 DOM 显示此...

当我在字段中单击以突出显示它时，阴影 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 解决了问题。我希望这可以帮助遇到同样问题的其他人。

表单输入字段未清除。这个"inner-editor"影子DOM是从哪里来的？

Form input field not clearing. Where is this "inner-editor" Shadow DOM coming from?

html

javascript

jquery

dom

shadow-dom