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を使って値をセットする場合は、見えないからといって、カウントしないわけにもいかない。
