[jQuery]textareaを最後までスクロールしないとsubmitできないギミック作成

要素内のスクロール量を取得する話になる。

用途

例えば申込みフォーム。

各種項目の設置は当然として、合わせて規約も置いておく。必須項目を入力し、規約を承諾した上で申し込んでもらう。

だのに規約を無視して申し込んであとから揉めるってケースはある。仕方ない。あっても読まないくせに文句を垂れるやつは一定数いる。リテラシーの低いやつも相手にしなきゃいけないというのが、オープンなサービスの辛いところ。

サービス側はリスクヘッジのために規約を読ませたい。規約を読んだってことを申込者に能動的に発信してもらいたい。そのためにどうするかっていえば、大体は以下の通り。

  • 「承諾する」チェックボックスの設置
  • 「承諾した上で申し込む」申込みボタンに表記
  • 規約を最後まで読まないと申込みボタンを押させない

上2つはやろうと思えば誰でも組めるので、めんどくさい3番目をやるのが今回の話。

やっていく

まずここを読む

【jQuery】スクロールが一番下まで移動したらボタンを表示させる方法
今回はjQueryを使ってスクロールが一番下まで移動したときにボタンを表示させる方法について紹介していきたいと思います。1つ目はウィンドウが一番したまでスクロールしたときにボタンを出すパターンと2つ目はtextarea内のスクロールが一番下

次にここを読む

【jQuery入門】disabled属性の設定・解除・判定方法まとめ! | 侍エンジニアブログ
この記事では「 【jQuery入門】disabled属性の設定・解除・判定方法まとめ! 」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじゃなく、新たな気付きも発見できることでしょう。お...

組み合わせたら完成。

作例

HTML・CSSをこんな感じにしておいて

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
    <script src="scripts.js"></script>
<style>
    body{
        background: #f5f5f5;
    }
    .wrap{
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        background: #fff;
    }
    ul{
        margin: 0 auto;
        padding: 20px;
        list-style: none;
    }
    ul li + li{
        margin-top: 20px;
    }
    textarea{
        width: 100%;
        height: 100px;
        box-sizing: border-box;
        resize: vertical;
    }
    button{
        width: 100%;
        height: 40px;
    }
</style>
</head>
<body>
<div class="wrap">
    <p>最後まで読んでね</p>
    <ul>
        <li>
            <textarea readonly>
中身をいっぱい書く
            </textarea>
        </li>
        <li><button type="submit" disabled>申し込む</button></li>
    </ul>
</div>    
</body>
</html>

jQueryでこうする

$(function(){
    var scroll_y = $('textarea').get(0).scrollHeight;
    var scroll_ny = $('textarea').get(0).offsetHeight;
    $('textarea').scroll(function(){
        var scroll_p = $('textarea').scrollTop();
        var scroll = scroll_p + scroll_ny;
        if(scroll_y < scroll){
            $('button').prop('disabled', false);
        }else{
            $('button').prop('disabled', true);
        }
    });
})

一番下までスクロールしたときだけbuttonのdisabledが解ける。一番下までスクロールしたあとに上に戻ったらまたdisabledになる。一旦解除したら解除しっぱなしにしたければ、if内のelseを削除。

動作はこうなる。

Document

まとめ

色々調べて構築する感じかなって思ったら正解が書かれてる記事があってめっちゃ早く済んでしまった。よかったです。

別案

textareaとかの枠内じゃなくて、ページ自体をスクロールするって手もある。

読ませたいんだからページ自体が長くなろうが関係ないだろう、むしろ装飾とかが楽になるし、みたいな。それはそれでいいんだけど、そうすると尚の事スクロールに注力して読まないんじゃないの?とか、いやどっちでも変わらんだろうとか。これだとsubmit位置までスクロールする=読んでるってことで、disabledのギミックは必要ないんじゃない?ってなって組むのは楽。でもそれだとね、どうなんですか。

アングラ寄りなサイトだときちんと読まないとsubmitの場所がわからない、みたいな感じにしてたりして、個人的にはそれも好きなんだけど。餡庫とかみたいな。まっとうなサービスでのリスクヘッジに向くのか?というね。難しい。

おまけ

disabled状態をcssで装飾することは可能。

button{  /* 通常 */
}
button:disabled{  /* disabled時 */
}

iPhoneとかだと色が一気に変わるので目が痛いから変えたいとか、chromeだと対して変わらないから分かりにくくて変えたいとか、そういう場合に。

コメント

タイトルとURLをコピーしました