「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
iOSのMobile Safari上で自動focusしてキーボードをせり上げる方法
はじめに iOS の Mobile Safari にて、モーダルを開くためのボタンをクリックしてモーダルが表示された瞬間にキーボードを表示させるには一工夫が必要だったのでその話をしたいと思います。 実現するために行ったこと モーダルを開いた瞬間(マウントされた瞬間)にモーダル内に設置している input に focus させればキーボードを表示できると思っていましたが表示されませんでした。 詳しく見てみると focus を呼んだ時に focus はしている模様。 そこで調べてみると、キーボードを表示させるにはどうやらユーザーのアクションが必要ということが判明しました。 解決策 下記のようにボタンを クリックした時(ユーザーのアクション) に行うモーダルを開く処理の後にモーダル内の input に focus させることで解決できました。 let button = document.getE
iOS で自動フォーカス時に仮想キーボードが表示されない件の検証結果
本スクラップは自動フォーカスによる仮想キーボードの表示を推奨するものではありません。あくまでも仮想キーボードを表示するための情報提供のみを目的としております。 時折、仮想キーボードを表示させるためにプログラムでフォーカスを制御するケースがあります。しかし、iOS のブラウザ（e.g. Mobile Safari）はプログラムで制御されたフォーカス時に仮想キーボードを表示しません。本挙動はバグではなく開発者（Apple）が意図的に行なっているかと思います。Apple は WebKit のバグチケット「Autofocus on text input does not show keyboard」に次のように言及しています。 We (Apple) like the current behavior and do not want programmatic focus to bring up th
【TypeScript】タグ付きユニオン型で型情報を正しく認識させる！
困ったこと ユニオン型（合併型）を使って型宣言をするとき、以下のように書きたいことがあるかもしれません。 /** * typeofを使って任意の型の場合で条件分岐させる * UserTextEvent: キーボードによって操作された時の文字情報を保持しているイベント * UserMouseEvent: マウスの操作をした時のx軸y軸の情報を保持しているイベント */ type UserTextEvent = {value: string, target: HTMLInputElement} type UserMouseEvent = {value: [number, number], target: HTMLElement} type UserEvent = UserTextEvent | UserMouseEvent function handle(event: UserEvent) {
Mutation observer
MutationObserver は DOM 要素を監視し、変更があった場合にコールバックを起動する組み込みのオブジェクトです。 最初に構文を確認してから、実際のユースケースを見ていきましょう。 構文MutationObserver は簡単に使用できます。 まず、コールバック関数を引数にもつオブザーバ(observer)を作成します。: config はブール値のオプションを持つオブジェクトで、“どの種類の変更に反応するか” を指定します。: childList – node の直接の子の変更, subtree – node のすべての子孫に対する変更, attributes – node の属性の変更, attributeFilter – 指定したものだけを監視するための、属性の配列 characterData – node.data (テキストコンテンツ) を監視するかどうか, ほかに
JSDoc 書き方
メソッド・関数へのコメント /** * 関数の説明 * @param {number|string} hoge パラメータの説明 * @param {string} [fuga] 任意の場合は [] がつく。 * @param {string} [fuga2='fuga'] 任意かつ未指定の場合の初期値が決まっている * @return {boolean} 〇〇か否か */ データ型の書き方いろいろ /** * @param {string|number} 文字列もしくは数値 * @param {string[]} hoge_ary その型の配列の場合 * @param {Object} user_info ユーザ情報 * @param {Object} user_info.name ユーザ名 * @param {Object} user_info.email ユーザのアドレス * @pa
カスタムイベントのディスパッチ
私たちは、ハンドラを割り当てるだけでなく、JavaScript からイベントを生成することもできます。 カスタムイベントを使用して「グラフィックコンポーネント」を作成できます。例えば、メニューのルート要素は、メニューで起きたことを伝えるイベントをトリガすることができます: open (メニューを開く), select (項目が選択された) など。 click, mousedown などのような、組み込みのイベントを生成することもでき、テストをするときに便利です。 イベントコンストラクタイベントはDOM 要素クラスと同様、階層を形成します。ルートは組み込みの Event クラスです。 このようにして Event オブジェクトを生成できます: 引数: event type – "click" や独自の "hey-ho!" のような任意の文字列です。 options – 2つのオプションのプロパ
[JS] スマホでclickイベントより早くユーザーのタップ動作に反応する - YoheiM .NET
こんにちは、@yoheiMuneです。 最近スマホでのWebアプリを開発することが多いのですが、タップへの反応速度を上げるこんな方法はどうかなぁと考えたので、ブログに書きたいと思います。 スマホでタップにより速く反応したい スマホ用Webアプリの開発で、ユーザーがタップした際にJSを起動したい（例えばダイアログを表示したいなど）という要件があるとします。 その場合に、タップ対象の要素のonclickにイベントをバインドして処理をすることが多いかと思います。 こんな感じ。 var btn = document.getElementById('someBtn'); btn.addEventListener('click', function() { // タップされた際の処理 }); でもこれだと確かに反応するのですが、ユーザーがタップしてからイベントが発火するまでに時間が空いてしまい、遅いの
![[JS] スマホでclickイベントより早くユーザーのタップ動作に反応する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/cccc0e0910f5e6c670ca8c44cd50ffd6640ce4ae/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F216.jpg)
スマホでシングルタップのレスポンスを向上させるjQueryプラグイン
スマホ（スマートフォン）ではWebページのリンクがタップしてからページ移動を開始するまでやや遅く感じることが多い。 調べてみるとスマホ上では、タップしてからクリックイベントが発生するまで約300msの遅延が発生しているとのこと。 Remove onClick delay on webkit for iPhone うのらぼ。 – 【JS】iPhoneでタップの反応が遅いと感じたら そこでtouchstart/touchendイベントを利用してシングルタップを高速に判定するjQueryプラグインを作ってみた。 実装概要 まずタップ検出対象に対して、touchstartが呼ばれたらtouchmoveおよびtouchendにリスナを設定。 タッチしてから指を離すまでに移動が無ければタップと判定し、カスタムイベントのtapを発火します。 それから従来のクリックイベントも同時に発火させるようにしました
Paw.jsというのを書いたのと今から始めるマルチタッチイベント処理 - damelog
どうも、連載予定は絶対に次回を書かないでおなじみの僕です。 Paw.js is 何 マルチタッチに対応してない、いわゆるfastclickを実現するものやtapイベントを発行するライブラリ、やたら機能が多くかつ特にtouchmoveでのイベント過多で処理落ちしかねないライブラリが多かったので、現実的に使うであろう範囲でめちゃ軽なやつが欲しかったので作りました。 Paw.js あなたがもしモバイルWeb開発者で60fpsを出さなければ死ぬのであれば使えばいいと思いますし、そんな必要が無いもしくはフリックやジェスチャも取りたいと言うのであればHammer.jsとか使えばいいんじゃないでしょうか。 シンプル, 小さい, 速い touchevent, pointereventのマルチタッチ対応 tap, doubletap, pressの3つのカスタムイベントを発行 fastclick機能 です。
Windows8 Gesture動作 - とみぞーノート
Vivo Tabを買ったWindows8タブレットでの動作確認用にASUSのVivo Tab RTを買った。タブレットとして使う分にはWindows8のメトロUIはなかなか使いやすい。 Gesture関連のイベント早速、JavaScriptからタッチ等ジェスチャ関連のイベントをどのように扱えるか試してみた。 まず、iOS,Androidのタッチ関連のイベントとはまったく異なる。Windows8ではタッチ関連のイベントにはマウスイベント、ポインタイベント、ジェスチャーイベントの3種類がある。 (a) マウスイベント 従来のマウス操作で使っていたmousedown,mouseup,click等のイベント。これらは、タッチパネル操作でも従来どおりイベント発生するので、PC用のサイトなどでは特に修正をしなくてもタッチパネルから操作できる(このあたりはiOS,Androidも同じ)。ただし、マルチタ
DOM Level 2 標準技術をMSIEで使う(イベント、基本操作) @ ぽかぽかWeb研究室
はじめに HTML/XML文書を動的に制馭するするためにはDOMが用いられることが多いわけですが、ことに X(HT)ML を取り扱う上では、どうしても DOM Level 1 の範囲だけでは力不足です。また、イベント制馭は Level 1では定義されていません。 MSIE では、基本的には DOM Level 1 までのサポートに留まっています。それ以外の振舞は独自規格で賄われているのが現状で、このことが、「処理系に依存しない記述」を妨げる原因にもなっています。 Mozilla/Netscape では、 (XHTML文書も含めて)XMLとして認識された文書では、名前空間が重要な役割を果たします。例えば、 XHTML の要素を正しく作成するためには createElementNSが必要になりますが、これは MSIE では認識されません。 具体的な方法 ここでは、 JavaScript(ECM
jQueryのbind、unbindみたいにnamespace使ってaddEventとかremoveEventできるやつ :: 5509
jQueryのbind、unbindみたいにnamespace使ってaddEventとかremoveEventできるやつ jQueryのbindとunbindは超便利やなぁと思って、arguments.calleeじゃなくてもremoveEventできるようなやつ書いた。addEventListenerとremoveEventLisetenerにnamespace渡して管理できる的な。iOSで動けばいいからattachEventとdetachEventは入れてないです。 結局思いついたやり方でやって、jQueryちゃんと読んでないけど、やり方はこんな感じ？つまり絶賛勉強中。。 巡り巡ってElement.prototypeを断念、、ソース修正した。どうせならこっちの方が使いやすいかも。Elementのprototypeに差し込んだ revision: gist: 904063 bindの使い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
公海555000kk线路检测—首页（欢迎您）