form内の入力項目数の残りを取得して、ユーザーにあとどれくらいで終わるのかを伝えたい

form内の入力項目数の残りを取得して、ユーザーにあとどれくらいで終わるのかを伝えたいときに、

20/30 あと10件

というメッセージを出そうと思う

このとき、ページ内の項目数をどのようにして、取得するかが、問題になる。 手動で、ひとつふたつと数えても良いのだけど、項目数が多いと、正確に数えるのが難しい。

自動的に算出する方法を考えてみる。

form内に存在する、ユーザーにとって、入力可能な項目とは何か?

formなので、input, texarea, select のいずれかとする。

とすると、対象となる、要素を取得するにはinput type= hidden と 見えない要素を除いてあげて、nameの重複を排除すれば、数は出せそうだ。

[...new Set(Array.from(document.querySelectorAll("select,radio,input:not([type='hidden'])")).map((e) =>{return JSON.stringify({name: e.name, hidden: e.clientHeight === 0})}))].map(v => JSON.parse(v)

ただ、select,radio,inputがe.clientHeight=0であるが、 JSを使って値をセットする場合は、見えないからといって、カウントしないわけにもいかない。