Category / JavaScript
子要素にhoverやclickがあったときに親要素に反応させたい
2019-07-20 問題 ・子要素にマウスが乗ったら、親要素の色を変えたい。 ・buttonの中の子要素がクリックされたときに、buttonがクリックされたことにしてほしい（ボタンの特定の位置だけクリック可能にしたい）。 やっぱりJavaS […]
vue.js で bootstrapのmodalを表示する（簡易版）
2019-05-13 問題 vue.js を使っている環境で、bootstrapのmodalを表示したいです。 答え modalの表示/非表示をvueでコントロールする場合、bootstrapのJavaScriptは使わないで、bootstr […]
tablesorterで単位付きカンマ区切りの列をソートする
2019-04-12 問題 jQueryのプラグインのtablesorterで、カンマ区切りの数値と単位の入った列を数値順でソートさせたいんですけど、辞書順になっているみたいです。 どうしたらよいですか。 答え tablesorter は j […]
jqueryuiのdatepickerで日曜・祝日を選択不可にする
2019-03-20 問題 jqueryuiのdatepickerで、日曜日・祝日は選択できないようにできますか。 答え jqueryuiのdatepicker に、beforeShowDay というオプションがある。これに関数を登録すると、 […]
【JavaScript】参照を保ったまま配列の末尾に要素を複数追加する
2019-03-04 問題 配列を参照を保ったまま他の配列とマージ（後ろに結合）するにはどうしたらよいですか。 var x = [1, 2, 3];var y = [4, 5, 6];var z = x;x = x.concat(y);con […]
【JavaScript】参照を保ったまま配列を空にする
2019-03-03 問題 配列を参照を保ったまま空にするにはどうしたらよいですか。 var x = [1, 2, 3];var y = x;x[1] = 5;console.log(y); // -> [1, 5, 3]x = []; […]
テーブルのセルにinputが入っている形のフォームで上下移動する
2018-10-19 問題 TABLEのセルにinput要素が並んでいる形のフォームで、Tab、Shift + Tab で左右の入力欄に移動は可能ですが、上下の入力欄にもキーボードで移動したいです。 答え Ctrl + 上下キーで移動できるよ […]
【Javascript】array_unique()
2018-07-23 問題 JavaScriptでphpのarray_unique関数みたいなことがしたい。 JavaScriptで配列の重複した値を1個ずつにしたい。 答え Arrayのfilter()を使うとできる。 var a = [0 […]
【JavaScript】クリップボードにコピー
2018-04-27 問題 「クリックしたら、クリップボードにコピーする」を作りたいです。 答え 例です。 input要素はわりと簡単。 <input type="text" id="copy-target […]
SyntaxHighlighterの導入方法
2018-03-27 問題 SyntaxHighlighter ってやたらとファイルが多いですが、どれをどう使うとよいのですか。 答え 以下を読み込めば使える。 CSSのCore CSSのデフォルトテーマ（もしくは任意のテーマ） javaSc […]
【JavaScript】文字列の末尾から指定文字数削除する
2018-03-22 問題 JavaScriptである文字列の末尾1文字を削った文字列が吉井です。 答え "abcdefg".slice(0, -1); // → "abcdef" String.slice() で文字列の指定開始位置から指定 […]
【JavaScript】改行を含めてマッチする正規表現
2018-03-14 問題 ※ES2018 以前の話 JavaScriptの正規表現で、改行を含めてマッチさせたいんですけど、 .（ドット）を改行にマッチさせるすべはないですか？ 例）HTMLでdivタグに囲まれた箇所 /<div>.* […]
【JavaScript】jQueryの.fadeIn()をCSSで実装する
2017-12-28 問題 アニメーションはCSSにお任せしたい。 .fadeIn()とかをCSSでできませんか。 答え アニメーションはCSSにお任せすると、JavaScript側ではCSSを変更したり、classの追加、削除で済むようにな […]
【JavaScript】上にスクロールするとにゅっと出てくるメニューを作る
2017-12-27 問題 長い画面で、メニューや検索フォームなどが、近くにいて欲しいんだけど、いつも見えると邪魔。 下へ下へスクロールしてみているときは隠れていて、 上にスクロールすると出てくるメニューを作りたい。 答え stickyな動き […]
【JavaScript】並んだチェックボックスを範囲で一括チェック
2017-12-20 問題 検索結果などでチェックボックスが並んでいるような場面で、 全チェックではなくて、 「範囲でここからここまでまとめてチェック」をしたい。 Gmailの画面などでそんな操作ができますよね。 答え Gmailと同じ方式で […]
!function(a){ /* */ }(arg); と (function(a){ /* */ })(arg); の違いは？
2017-11-30 問題 即座に関数実行しているのだと思いますが、以下の2種類見かけます。 何か違うのですか？ (function(a){ // })(arg); !function(a){ // }(arg); 答え 大きく […]
【JavaScript】セレクトボックスをreadonlyにする
2017-11-28 問題 select要素でreadonlyしたいのですが、無理ですか。 disabled じゃなくて、readonlyです。 使用可能だけど、変更不可にしたいです。 答え readonuly属性では無理です。 考え方を変え […]
【jQuery】Shift+クリックでチェックボックスを一括選択
2017-11-17 問題 「始点クリック → Shift+終点クリック」でチェックボックスを範囲でチェックしたり、チェックを外したりしたい。 答え こんな感じでどうでしょう。 <ul> <li><input t […]
【vue.js】bodyをelに指定するべきではない
2017-11-11 問題 vueで、elにdiv要素を指定したりbody要素を指定したりできるようですが、どちらが正解？ new Vue({ el: 'body' }); それとも new Vue({ el: '#app' }); 答え v […]
JavaScriptでOCR
2017-07-01 問題 画像からテキストを判別したい！ 答え これはどうでしょうか。 http://tesseract.projectnaptha.com/ １、JS読み込み <script src='https://cdn.raw […]