项目场景：

puppeteer 中使用 page 输入 input 的时候，有可能需要清除 input 原本就有的值。

解决方案：

方案1

在浏览器环境中，使用 jquery 或者 js 直接清空 input 的值

await page.evaluate( () => document.getElementById("inputID").value = "")

请注意 这种方案只是给input的值清空了，页面有可能还有侦听事件，是不能触发的。

方案2

使用 $eval 方法，在它的回调函数中执行

await frame.$eval('inputID', el => el.value = 'xxxxx')

请注意 这种方案只是给input的值清空了，页面有可能还有侦听事件，是不能触发的。

方案3

模拟键盘删除事件，有多少字符删除多少次

const inputValue = await page.$eval('#inputID', el => el.value);
for (let i = 0; i < inputValue.length; i++) {await page.keyboard.press('Backspace');
}

方案4

模拟 input多次点击 操作，多次点击后会选中input的值，再次输入你想输入的字符

const input = await page.$('#inputID');
await input.click({ clickCount: 3 })
await input.type("xxx", { delay: 100 });

除了这几种方法外，可以熟悉键盘事件，自己创造出更好的方案

替换所有文字：

// 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';
});

添加文字

// 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';
});

删除最后一个字符：

// 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);
});

删除第一个字符：


// 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);
});

puppeteer 清空input原本的值

微信群大佬都在等着你

微信扫描二维码加入微信群，交流学习，及时获取代码最新动态。

puppeteer 清空input原本的值相关推荐

JS/jQuery获取input的值和清空input的value值
一.获取input的值 1.通过普通选择器获取通过类选择器获取:$('.class').val() 通过id选择器获取:$(" #id").val() 2.通过标签选择器获取 $ ...
js清除HTML的input数据,js 清空 input file 的值的方法
今天在做一个利用 JS 上传本地图片的小功能时,需要在文件上传成功后,清空 file 类型的 input 元素中所选择的本地文件,以方便二次功能的调用!而这篇文章飞鸟慕鱼博客就来说一说,如果利用 js ...
清空input file中的值
清空input file中的值对于input type为file元素: 未选择文件之前,它是这个样子: 当选择文件名为index.html的文件后,它变成了这个样子,input元素会显示文件名信息: ...
js文件上传以及js清空input file值
最近项目中遇到文件上传的案例, 之前涉及文件上传的较少, 今天针对js文件上传的案例做一个详细的教程,方便日后查阅! 本教程从原生JS, jQuery, 两处着手简单介绍文件上传案例 1.原生JS ...
Javascript 清空input type=file 的值方法
一般在项目中上传文件监听change事件,若两次均上传相同文件会监听不到input的改变的事件,所以用以下方法清空input的值方法一: function clearInputFile(f){if( ...
微信小程序清空input内容
需求说明在有的时候,比如我们想要在点击按钮后就清空input的内容,但是官方并没有提供input清空的直接方法,博主自己亲身实践找到了一种方法. 第一步添加input值在我们想要改变的input ...
php监听input,jQuery如何实时监听获取input输入框的值
jQuery实时监听获取input输入框的值,在我们日常web项目开发也常需要去实现这样的功能效果.为了作出即时动作去引导浏览者,以便提高网站的用户体验感. 下面我们就结合具体的代码示例,为大家介绍j ...
JS改变input的value值不触发onchange事件解决方案（转）
JS改变input的value值不触发onchange事件解决方案 (转) 参考文章: (1)JS改变input的value值不触发onchange事件解决方案 (转) (2)https://www. ...
python input与返回值-python中使用input()函数获取用户输入值方式
我们编写程序最终目的还是来解决实际问题,所以必然会遇到输入输出的交互问题,python中提供了input函数用来获取用户的输入,我们可以用以下程序演示. user_gender = input(&qu ...

puppeteer 清空input原本的值

项目场景：

解决方案：

方案1

方案2

方案3

方案4

puppeteer 清空input原本的值相关推荐

最新文章

热门文章