项目场景：
puppeteer 中 使用 page 输入 input 的时候，有可能需要清除 input 原本就有的值。
解决方案：
方案1
在浏览器环境中，使用 jquery 或者 js 直接清空 input 的值
await page.evaluate( () => document.getElementById("inputID").value = "") • 1
请注意 这种方案只是给input的值清空了，页面有可能还有侦听事件，是不能触发的。
方案2
使用 $eval 方法，在它的回调函数中执行
await frame.$eval('inputID', el => el.value = 'xxxxx') • 1
请注意 这种方案只是给input的值清空了，页面有可能还有侦听事件，是不能触发的。
方案3
模拟键盘删除事件，有多少字符删除多少次
const inputValue = await page.$eval('#inputID', el => el.value); for (let i = 0; i < inputValue.length; i++) { await page.keyboard.press('Backspace'); } • 1 • 2 • 3 • 4
方案4
模拟 input多次点击 操作，多次点击后会选中input的值，再次输入你想输入的字符
const input = await page.$('#inputID'); await input.click({ clickCount: 3 }) await input.type("xxx", { delay: 100 }); • 1 • 2 • 3
除了这几种方法外，可以熟悉键盘事件，自己创造出更好的方案
替换所有文字：
// Using page.keyboard: await page.focus('#example'); await page.keyboard.down('Control'); await page.keyboard.press('A'); await page.keyboard.up('Control'); await page.keyboard.press('Backspace'); await page.keyboard.type('foo'); // Using page.evaluate: await page.evaluate(() => { const example = document.getElementById('example'); example.value = 'foo'; }); • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15
添加文字
// Using page.keyboard: await page.focus('#example'); await page.keyboard.press('End'); await page.keyboard.type(' bar qux'); // Using page.evaluate: await page.evaluate(() => { const example = document.getElementById('example'); example.value += ' bar qux'; }); • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12
删除最后一个字符：
// Using page.keyboard: await page.focus('#example'); await page.keyboard.press('End'); await page.keyboard.press('Backspace'); // Using page.evaluate: await page.evaluate(() => { const example = document.getElementById('example'); example.value = example.value.slice(0, -1); }); • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12
删除第一个字符：
// Using page.keyboard: await page.focus('#example'); await page.keyboard.press('Home'); await page.keyboard.press('Delete'); // Using page.evaluate: await page.evaluate(() => { const example = document.getElementById('example'); example.value = example.value.slice(1); }); • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13
