如何通过浏览器控制台填充contenteditable类型的HTML文本输入字段

嘿，作为赛车工程师还钻研网页小技巧，必须给你点个赞！咱们一步步来解决这个问题：

首先你之前尝试的gencar-editor="McLaren MP4"写法不对，原因有两个：

• gencar-editor是这个元素的class类名，不是可以直接赋值的属性；
• 这类contenteditable="true"的div，它的文本内容是作为元素的子内容存在的，不是通过属性存储的（和普通input框的value属性不一样）。

正确的控制台代码写法 #

你可以直接在浏览器控制台输入以下代码，就能自动填充文本：

// 定位到目标元素（通过class选择器，注意前面的点）
const searchElement = document.querySelector('.gencar-editor');
// 设置文本内容
searchElement.textContent = 'McLaren MP4';

如果想更简洁，一行代码就能搞定：

document.querySelector('.gencar-editor').textContent = 'McLaren MP4';

进阶：触发输入事件（如果页面没自动响应） #

有些网页会监听输入事件来触发搜索或其他逻辑，单纯设置文本可能不会触发这些动作。这种情况下，你可以手动触发一个input事件：

const searchElement = document.querySelector('.gencar-editor');
searchElement.textContent = 'McLaren MP4';
// 触发冒泡的input事件，模拟真实输入
searchElement.dispatchEvent(new Event('input', { bubbles: true }));

这样就能完美模拟你手动输入的效果啦！

内容的提问来源于stack exchange，提问作者GTX