この記事で対象としているブラウザはChrome(mac/win), Safari(mac), Firefox(mac/win), Edge(win) の最新バージョンで、以降これらをモダンブラウザと表記する。 tl;dr Safariで全角入力におけるJSイベントの挙動がおかしかったため調査したところ、仕様(draft含む)上はInputEventだけで判定できそうで期待したが、現状の挙動はベンダー毎に異なった 本命のinputEvent.isComposingはSafari/Edgeで対応してなかったりChrome/Firefoxでも挙動が違って使い辛い inputEvent.inputTypeは使える場面がありそう CompositionEventはモダンブラウザ全てに実装されており最も有用 inputイベントと組み合わせる場合はFirefoxのcompositionendイベントの発
JavaScriptのイベント、ややこしいですよね。 名前が似ているものや、使い方にクセがあるものもあり、簡単なようで実装に手間どることが多いです。なので、よく使うイベントの概要をざっくりまとめ、それぞれの実行タイミングとイベントオブジェクトをコンソールで確認できるサイトを作りました。 忘れたときに調べればいいだけの話なので、わざわざサイトを作る必要はなかったのですが、イベントを眺めるのが好きな人に見ていただけたら嬉しいです。 JavaScriptのイベントをたくさん見られるサイト ひたすらaddEventListenerしていたら、イベントに愛着が湧いたので、イベントの実装でハマりそうなところをまとめています。 なぜイベントを使うのか マウスなどはイベントじゃないと値が取得できませんが、頑張ればイベントを使わずとも実装できるものもあります。たとえば、テキストボックスの変更を知りたいだけで
ある日、ふと思い立った自分は、社内のチャット部屋にこんな書き込みをしました。 クラスメソッドの知見がわらわらと集まりました。みんな熱量高すぎやろ。ありがとう！ですまそうとしたら、部長からこんなメンションが。 「これブログネタですよね？」 この会社、ほんま怖いわぁ・・・ というわけでこの記事では、クラスメソッド社内で集まった知見を元に、ITエンジニア向けにIT界隈の勉強会情報を収集に便利なサイトを紹介していきます。2018年、エンジニア生活の始まりにいかがでしょうか。今年も良い年にしたいすね。 ほないってみよ。 __ （祭） ∧ ∧ Y ( ﾟДﾟ) Φ[_ｿ__ｙ_l〉 勉強会ﾀﾞﾜｯｼｮｲ |_|＿| し'´Ｊ IT系として存在感急上昇「Doorkeeper」 セミナー・勉強会・イベント管理ツール | Doorkeeper コミュニティがベースとなっているイベント情報提供サイト
最近Twitterクライアントやエディタ、その他WebアプリなどでいわゆるSingle Page Applicationを書く機会が何度かあって、押下されたキーの種類を判定するロジックが頻出するようになったので雑にライブラリ化して r7kamura/key-string というのを書いた。 使い方 KeyStringDetectorクラスのインスタンスを作成して、KeyStringDetector#detect(event) を実行すると文字列が得られる。 const keyStringDetector = new KeyStringDetector(); keyStringDetector.detect(event1) // => 'F' keyStringDetector.detect(event2) // => 'Ctrl+Return' keyStringDetector.dete
• Layout • Paint • Composite align-content Changing align-content alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations. Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together. align-items Changi
いいかげんあんどろでも勉強するかと 6 年遅れくらいで重い腰を上げかけている。気が重い。スマホとか知らないっすよ・・・。 あんどろ、というかスマホ固有の話題は色々あれど、その一つがタッチベースの UI なのは間違いない。そういえばタッチというのはどうやって実装されているんだろうか。それを一通り眺めれば、少しは気の重さが晴れるかもしれない。ということで今日はタッチイベントの実装を眺めてみたい。実装といっても静電容量だの電磁誘導だのではなくユーザー空間の話です。そして老人の勉強記録であり目新しい話はありません。間違ってたら教えてください。 参照するコードは何も考えず repo sync で降ってくる AOSP master。たぶんだいたい 4.4.x 相当(だよね？) View#onTouchEvent() あんどろプログラマからみたタッチイベントはふつう View#onTouchEvent(
Updated 2014.10.15 / Published 2014.03.04 ホイール系のイベントは各ブラウザの実装がバラバラでクロスブラウザ対策に苦労するイベントのひとつとして知られているでしょうが、Document Object Model Level 3 Eventsにより標準化されたwheelイベントが多くのブラウザで実装されてきています。本エントリーでは現状のホイール操作時の各イベントについて、クロスブラウザでフォールバックしながら用いる方法を解説していきます。 ホイール系イベント比較 DOMMouseScroll, MozMousePixelScroll DOMMouseScrollイベントとMozMousePixelScrollイベントはどちらもGecko 固有のため、現存ではFirefoxしかサポートしていないイベントです。DOMMouseScrollはスクロールする
[JavaScript]for 内でイベントリスナとか登録するときにやっちゃいがちな間違い. とその対処法を３つほど. | TM Life 対応その２: event.targetを使う と 対応その４ : this を使う について 上記サイトで書いてあることが間違っているというわけじゃないんだけど、少し補足したい。 event.target その Event オブジェクトには発火元となった要素を target プロパティとして保持しています. 合っています。 が、on* や addEventListener した要素と target は必ずしも一致しない点には注意した方が良いと思います。 <ul id="list"> <li>foo <b>hoge</b></li> <li>bar <b>hoge</b></li> </ul> var list = document.getElement
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」＝「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
これは CSS Programming Advent Calendar 2012 の 13 日目の記事です。 (5日ぶり3回目) 今回はCSSプログラマー御用達、（個人的に）最強のプロパティ pointer-events について書こうと思います。 pointer-eventsとはpointer-events - CSS | MDN書くブラウザの対応状況 Can I usePointer Events & Disabling Current Page Links端折って説明すると pointer-events:none; を指定した要素の各種動作が起きなくなります。 詳しいことは気になったら調べてみてください。 何が出来るの？リンクを無効にしたりLINK/*css*/ .disable_link { pointer-events:none; } pointer-events: none;が
EaselJSにEventDispatcher.jsが追加された様子。 https://github.com/CreateJS/EaselJS/ JavaScriptで困ってたのがカスタム・イベント作成と通知。 無いと困るのでオレオレ実装でだましだましやってきたけど、もっと信頼できる仕組みを作りたいと思ってました。 そんな時の、この良いお知らせ。 まじめにお仕事していると良いことがあるなぁ〜。 年末のステキなプレゼントです。 EventDispatcher.jsのソースはgithubでご覧になって下さい。 ActionScript 2, mx.events.EventDispatcher に似た仕組みを持っているようです。 使い方もかなり似ています。 jQueryを使用しています。 var EventDispatcher = createjs.EventDispatcher; functi
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定（2フィンガータップ、ロウテイト、ピンチアウト、ピンチ） 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
The blog tapquo.com has been acquired by FindMyHosting.com. Its best and archived contents are kept alive as sub-pages of FindMyHosting.com/tapquo/ FindMyHosting.com takes no responsibility for the factual accuracy or anything else regarding the archived Tapquo contents posted under FindMyHosting.com/tapquo/ About Tapquo.com: Tapquo, founded in 2011, was built to develop meaningful projects design
2011年06月21日 Androidでkeyイベントを発生させるinputコマンドをサクサクにする 以下のページでAndroidのinputコマンドが紹介されていました。 adbを使って端末にキーイベントを送る - TechBooster このコマンドを詳しく見てみます。 inputコマンドの使い方 コンソールかadbのshellから単にinputと打ってみます。 # input usage: input [text|keyevent] input text <string> input keyevent <event_code> このinputコマンドを使うと任意のキーイベントをコマンドラインから発行することができます。 実際のキーイベントのコードはandroid.view.KeyEvent.javaに定義されています。 便利そうなものをピックアップすると public static
本稿では、AndroidのHandlerクラスやLooperクラスを取り上げます。これらは、Androidでイベントドリブンのプログラムを書くときに欠かせないものです。 イベントドリブン 死語でしょうか。もしかしたら最も古いデザインパターンの一つかもしれません。以下のような特徴を持ちます。 あるスレッドが、無限ループを持つ ループでは、メッセージを待ち、メッセージが来たらそれを処理する 送られたメッセージはキューに蓄積され、届いた順に処理される この無限ループのことを「メッセージループ」、メッセージを処理するコードのことを「メッセージハンドラ(あるいは単にハンドラ)」、キューのことを「メッセージキュー」と呼びます。また「メッセージ」のことは「イベント」と呼ぶ場合もあります。 イベントドリブンで良く見かける問題 例えば「ボタンがタッチされた」というメッセージに対するハンドラを書いているとしま
投稿者：野中 文雄 | 投稿日：2011.07.15 | [AS 3][ActionScript][Tips][野中ゼミ] ステージに置いたインスタンスがタイムラインから除かれるときには、DisplayObject.removedFromStageイベント(定数Event.REMOVED_FROM_STAGE)が起こります。ところが、そのインスタンスがTLFテキストを含むと、内部的に初期化が行われるため、一筋縄ではイベントが意図どおりに扱えません。 たとえば、[テキストツール]で[TLFテキスト](インスタンスmy_txt)をひとつつくったMovieClipインスタンスmy_mcがメインタイムラインに置かれたとします(図001)。TLFテキストが新たに備わったFlash Professional CS5の最新Flash Player 10.1で書出すと、メインタイムラインは初めStageオ
![[AS3] TLFテキストを含むインスタンスがステージの表示リストから除かれるとき](https://cdn-ak-scissors.b.st-hatena.com/image/square/a092edc21fa668dd8fd9d4117d5f1ea7812f16d6/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Ff-site.org%2Fogp_2013.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
