使用pupeeteer把日常惱人的繁瑣事自動化,是相當方便的一件事
但在輸入完畢後,總是會需要將內容清空
把幾個覺得不錯的作法整理出來
一、雙擊反白後清空
最直覺得想法: 模擬人為操作!
我自己主要也是採用這個作法
語法簡單乾淨
直接在click傳入clickCount
次數就好
注意只點2下時有時會漏掉,browser點3次會是確定有全選
1 | await elementHandle.click({clickCount: 3}); |
再更精簡一點,2行就可以搞定!
畢竟全選後直接輸入文字,就會把現有內容清除了
1 | await elementHandle.click({clickCount: 3}); |
二、操作鍵盤清除內容
流程人工操作得熟悉時,最常使用的就是鍵盤操作了!ctrl + a
→ Backspace
在puppeteer也可以做到
覺得滿有意思的,特別記錄
1 | await page.click('.id'); |
但要注意的是,在mac下不能運作
因cmd
按鍵是由MacOS在控制的(見此issue)
甚至使用home、end來全選範圍也行
1 | await page.keyboard.press('Home'); |
三、指定反白範圍
這點雖然平常不太會用到,但也許某些情境下仍有用上的機會
下述範例是指定全部範圍,但可依需求傳入長度,甚至由中間再插入文字
記錄寫法便於未來可參考
1 | await page.focus("input[name=email]") |
四、使用瀏覽器的右鍵功能全選
最乾淨的作法!直接Call 瀏覽器的api 全選、刪除!1
2await page.evaluate(() => document.execCommand('selectall', false, null));
await page.keyboard.press('Backspace');
參考資料
上述作法其實都是下方issue眾人集思廣義出來的結果,但要短時間爬完仍需一些時間
於是把確定可以解決的作法整理出來,便於快速查找解法!
GitHub/how to clear input field value before typing/inserting?