BETA

【修正済】お願いだからsubmitしないでくれ【Qrunch記事編集】

投稿日:2019-02-09
最終更新:2019-02-12

追記(2019/02/12)

修正されました。

$(document).on("keypress","input:not(.allow_keypress_submit)",function(e){  
  return e.which !== 13;  
});

逆にッターンで投稿したい場合は、

document.getElementsByName('title')[0].classList.add('allow_keypress_submit')

ですかね。

素早い対応、感謝です!

はじめに

それはQrunchで記事を編集していたときのこと。

私「タイトルは何にしようかなー」
私「ばずる? とかよくわからないしこれでいいやー」

カタカタカタッターン

私「!?!?!?」

何が起きているのか

  1. タイトルを編集しました
  2. Enterを勢い余って押下しました
  3. 記事が投稿されちゃいました!

なぜ起きているのか

HTMLを覗いてみたところ、以下のようになっていました。
(本当はもっといろいろ書いてあります)。

<form action="/entries/edit/submit" accept-charset="UTF-8" method="post">  
    <div class="title">  
        <input placeholder="記事のタイトルを入力..." type="text" class="entry-title" name="title" size="40" tabindex="1" autofocus required>  
    </div>  
    <button type="submit" class="submit" style="display:none"></button>  
</form>

HTMLのform内でinputを用いたとき、場合にもよりますが、Enter押下でsubmitが発生するようです。
検索フォームとかなら便利なものですが、こういった場面(投稿)ではびっくりします。

どうすれば起きなくなるのか

defaultでsubmitされてしまうのならば、それをpreventしてしまえばよいのです!

JavaScriptには、preventDefault()というものがあります。
Event.preventDefault() - Web API | MDN

それを用いたUser Scriptを書いてしまえばOKです。
TampermonkeyやGreasemonkeyなどの拡張機能を使いましょう。
(なんなら拡張機能を作ってしまうという手もありますが)。

以下は私が作ったTampermonkey用User Scriptです。ものすごくシンプルです。

// ==UserScript==  
// @name         Please Don't Submit!  
// @namespace    https://okayu.qrunch.io/  
// @version      1.0  
// @description  Qrunchでの編集時、タイトル欄でEnter押下しても記事が投稿されないようにします  
// @author       おかゆ  
// @match        https://qrunch.io/entries/edit  
// @match        https://qrunch.io/logs/edit  
// @match        https://qrunch.io/entries/*/edit  
// @match        https://qrunch.io/logs/*/edit  
// @grant        none  
// ==/UserScript==  

(function() {  
    'use strict';  

    document.getElementsByName('title')[0].addEventListener('keydown', (e) => {  
        if (e.key === 'Enter') {  
            e.preventDefault();  
        }  
    });  
})();

@matchのURLにおいて[name="title"]keydownされたとき、それがEnterキーであった場合はデフォルトの動作をpreventする(防ぐ)だけです。
解説するまでもないですかね。

おわりに

Qrunch、絶賛開発中でまだまだいろいろと気になるところがありますが、期待しています。

私も私でQrunchをカスタマイズする拡張機能でも作ろうかな?
簡単なものならできるかな〜。
しかし最近、キーボード打ちすぎて肘が痛い…。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@okayuの大して技術的ではないブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!