IME利用者のEnterが暴発しないようにisComposingで防ぐ | ダーシノ(@bc_rikko)
IME利用者のEnterが暴発しないようにisComposingで防ぐ 海外製Webサービスを利用すると、日本語変換の確定時（Enter押下時）に入力途中のデータがSubmitされてしまうことが多々ある。GitHubのIssue/PRのタイトルしかり、ChatGPTの入力欄しかり。 Enterでフォームを送信するのはWebの標準的な挙動だが、IME利用者（主に日本/韓国/中国語話者など）にとって非常に不便なので変換確定時のEnterのイベントを無効化する処理が必要になる。 そんなときに使えるのがKeyboardEvent.isComposingやElement#compositionstartイベント、Element#compositionendイベントだ。 <form> <label for="title">Title</label> <input id="title" type="te
i18nextを使ってフロントエンドでお手軽ローカライズ - Qiita
i18next-browser-languagedetectorはブラウザの言語設定をいい感じに取得してくれるプラグインです。 豊富なプラグインの一覧はこちらをご確認ください。 html 次のようにresourcesで多言語化のためのリソースを設定してi18nextを初期化します。 初期化後はi18next.t関数で指定したキーによって、ローカライズされた値を取得することができます。 これはページ表示後にHello Worldをアラート表示するサンプルです。 日本語設定のブラウザで開けばこんにちは、世界と表示されます。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="bower_components/i18next/i18next.js"></s
【コピペで実装】Cookie使用同意のポップアップ3選 | IB-Note
サイトを訪れたときに時々表示されるCookie使用同意のポップアップ。よくあるタイプのものを独自に作成してみました。 最小限のHTML/CSS, JavaScriptだけで構成しており、コピペで簡単に実装することができます。 ※本ポップアップは、あくまでサイトがCookieを使用していることをユーザに伝える簡易的なものです。GDPRに準拠しているわけではないのでご注意ください。 はじめに：Cookie使用同意に関して 最近は以前に比べ、Cookieをはじめとする個人情報の扱いが世界的に厳しくなっています。 背景には、EUで2018年5月に施行されたGDPR（一般データ保護規則）の項目のうち、Cookieの利用同意に関する要件が厳格化したことがあるようです。その影響でGoogleさんが5000万ユーロの制裁金を科せられたとか… 現在、日本ではCookieの利用同意に関して明確なガイドラインが
ローディング画面の簡単な作り方！JavaScriptをコピペするだけで実装できる方法
そんなあなたに、おすすめのローディング画面の作り方の記事です。 ウェブサイトの読み込みが遅くて、コンテンツを見てもらう前に、ユーザーが離脱していませんか。だからといって読み込みに時間がかかるとしても、外せないコンテンツもあるので困ってしまいますよね。ウェブサイトに来た瞬間0.1秒でも目に入る画面は、ユーザーがすぐに離脱しないようするために、とても重要なものです。 そんな重要な瞬間に表示させる画面を、ユーザーがすぐに離脱しないようにできる方法があります。少しの工夫でウェブサイトの直帰率を下げることができるのなら、やっておきたいですよね。 実際に何をするかというと、コンテンツを表示する前にローディング画面を作り表示させます。ウェブサイトに限らずアプリなどでも、ローディング画面を表示させてるサービスを見たことあるのではないでしょうか。 ローディング画面作り方を覚えて、ローディング画面を表示させる
本文がグラデーションで消える、続きを読むボタンの作り方
本文がグラデーションで消える、続きを読むボタンの作り方 Publish Date: 2017.10.05 画像のような本文の冒頭は見えているけど、後半はグラデーションで消えているような「続きを読む」ボタンの作り方です。 デモはこちら 実際のコード <p class="text hidden"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla molestias et dolore, nisi repellendus odit repellat labore ratione velit quas amet tenetur, quis assumenda voluptate alias laborum aperiam reprehenderit incidunt. Lorem ipsum dolor sit ame
素のJSとSwiperでモーダル内にスライダーを表示する方法 | WebDev Tech
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>JS Modal & Swiper DEMO</title> <!-- Swiper CDN読み込み --> <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script> <!-- CSS読み込み --> <link rel="stylesheet" href="
Javascriptだけで簡易にブラウザ言語ごとにHTMLコンテンツを切替 - Qiita
<div id="ja-contents"> ------ 日本語コンテンツ ------ </div> <div id="en-contents"> ------ 英語コンテンツ ------ </div> <div id="zh-contents"> ------ 中国語コンテンツ ------ </div> <style> # ja-contents, # en-contents, # zh-contents { display: none; } </style> <script type="text/javascript" charset="utf-8"> var browserLanguage = function() { var ua = window.navigator.userAgent.toLowerCase(); try { // chrome if( ua.index
毎月同じ日に表示／非表示を切替えるJavaScript
一度設定すれば毎月決まった日に自動で動作します。 また、手動で行うとどうしても忘れてしまうことがあります。その点JavaScriptを使うと忘れることがないため手動よりも確実です。 サンプルサンプルとして下の2種類を用意しました。 毎月1日 See the Pen First display.（毎月1日に要素を表示するJavaScript） by ざきひー (@zakihiii) on CodePen.0 毎月1日になると画像を表示します。 本記事をご覧になっている日が1日でない場合はサンプルのJS欄にある(1 == day)を記事閲覧当日の数字に書き換えてRerunをクリックしてください。画像が表示されます。 例）記事閲覧当日が12日なら(12 == day) 5と0のつく日 See the Pen 5と0のつく日に要素を表示するJavaScript by ざきひー (@zakihiii
指定日時で要素の表示・非表示を切り替える - Qiita
セールとか長期休暇とか指定の期間だけバナーを表示したいことがある。そんな時用の表示切替jsです。 要素にclass="switch"を指定し、displayを切り替えます。 startとendに「yyyy/MM/dd HH:mm:ss」の形式で日時をセット。 切り替える要素はリストでも画像でもよく、いくつでも増減できるのがミソだけど、表示・非表示によるデザイン崩れの可能性は念頭に置いておく。 <!-- class="switch"の要素に開始日時・終了日時を指定しておく。 ex)start="2017/10/10 10:00:00" end="2017/11/11 11:11:11" --> <ul> <li class="switch" start="2017/01/01 00:00:00" end="2017/01/03 23:59:59"> <img src="image.jpg">
クリック一つでクリップボードにコピーする機能（HTMLとJavaScriptのみで実現） | まろりかの自由帳
コピーって結構使いますよね？ スマホだと、長押しして選択してコピーしてますよね。 パソコンだと、WindowsであればCtrl + C、Macであれば⌘command + Cでショートカットをよく利用していると思います。 ショートカットを使わずに右クリックからコピーする人もいると思います。 パソコンならショートカットもありますし簡単にコピーできますが、スマホだと少々面倒くさいですよね。 そんな面倒くさいコピーを簡単にしたかったので、 今回はクリックだけでコピーできるような機能をブログやサイト内に設置する方法について紹介したいと思います。 なお、今回紹介するのは外部のjQueryやBootstrapなどは利用しなくても動作するものなので必要であればすぐに利用できます。 今回は外部ライブラリとかを使わず、純粋なHTMLとJavaScriptだけでクリップボードのコピーを実現します。 外部ライブ
Youtube 動画の埋め込みで遅いページの高速化
Youtube の複数の動画を埋め込むとページ自体が非常に遅くなる(重い)時の高速化(軽量化)の方法． 原因は iframe で各動画を読み込みに行くため． 「youtube 複数 埋め込み 高速化」「youtube 複数 埋め込み 軽量化」「youtube base.js 重い」「youtube 埋め込み 重い」で検索すると説明してくれているページが多数見つかる． 軽くするのが目的なのに jQuery を使うのは本末転倒と気づいたので jQuery を使用しないで javascript オンリーで書き直しました．(2021/02/12) ※) 2026/4 現在，もっと良い方法を見つけたので，以下の記事を先に読んだ方がよいです． 変更履歴 (2020/04/05 スマホ時に横がはみ出る場合に対応．) (2020/05/12 縦の長さも横幅を縮小した割合で縮小するように修正．) (2020
スクロールに応じて任意の要素をアニメーションさせる超軽量スクリプト・「animon」 - かちびと.net
animonはスクロールに応じて任意の要素をアニメーションさせる超軽量スクリプトです。非依存型で単体で動作します。 ScrollTrigger.jsの機能をやや抑えて軽量化した、みたいな感じでした。使い方も導入もとても簡単です。 <link rel="stylesheet" href="https://unpkg.com/animon@1.0.1/dist/animon.css"/> <script type="text/javascript" src="https://unpkg.com/animon@1.0.1/dist/animon.iife.js"></script> <script type="text/javascript"> Animon.animon(); </script> CSSとJSを読み込んで初期化。これで準備完了です。設定は加須亜夢データ属性で行います。 <h1
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。 ローディングアニメーションの設置手順こんな感じで、最初にローディングアニメーションを表示させ、ページを読み込んだらコンテンツを表示させるページを作ってみましょう。よく「CSS だけで実装できる！」なんてうたわれている場面もありますが、多くの場合アニメーション部分のみのおはなしで、実際にページの読み込みを認識させるには簡単な JavaScript も必要です。 1. ローディング画面の用意まずはコンテンツを用意しましょう。上部にローディ
[JavaScript] Enterキーで直接Submitする方法と無効化する方法
お問い合わせやユーザー登録などのフォームに入力をするときに、良くあること。 日本語を入力した後、そのままEnterキーで文字を確定しようとしたつもりが、実は英数字入力モードになっていて、入力途中なのにそのままSubmit（送信）されてしまった、なんて苦い思いをしたことがある人、結構いませんか？ 「普段からフォームに入力するときは注意しているから大丈夫」という方、「ブラインドタッチで入力するので常に画面を見ているから大丈夫」という方、いらっしゃると思います。でも、なぜかフォーム入力中にEnterキーを2度押ししてしまった！なんてこともあるかもしれない。 そんな状況で、もしサイト側でEnterキーでのSubmitを無効化していたら、ユーザーが間違ってEnterキーを押してしまってもSubmitされてしまわずに済むので、ユーザビリティとしては、とても親切なんじゃないかな。 その他、Enterキー
![[JavaScript] Enterキーで直接Submitする方法と無効化する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/211767625f84484ef361fd76291a80649c207990/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fvertys.net%2Fwp-content%2Fuploads%2F2006%2F09%2Fcatch-javascript-enter.jpg)
<script> タグに async / defer を付けた場合のタイミング - Qiita
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Javascript】アコーディオンメニューを最小コードで実装する
とにかく軽いLightbox系スクリプト「Luminous」の使用方法
Cookie Consent の例 | knooto
midori
スマホも対応！スクリーンいっぱいに表示させるスライダーを実装するスクリプト -FullScreen Slider
