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
JavaScriptでバーコードを読み取る方法
<button type="button" class="btn btn-fab btn-round btn-info btc_scan" name="btc_scan"></button> <!-- スキャンエリア --> <div class="scan_area" style="height: 100vh; display:none"> <div id="photo-area" class="viewport"></div> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 6
バーコードリーダーをブラウザから使えるようにしたい！JSのバーコードリーダーライブラリを調査しました - ecbeing labs（イーシービーイング・ラボ）
はじめに 技術調査まとめ 余談: サーバーサイドで何とかする選択肢について QuaggaJSについて QuaggaJSの素敵ポイント QuaggaJSの注意ポイント まとめ はじめに はじめましてorこんにちは！ ecbeing2年目、R&D部門所属のいかちゃんです。 前回や前々回には、Dockerの記事やスクラムに関する所感記事を書きました。 blog.ecbeing.tech blog.ecbeing.tech そして今回は…技術寄りな記事となります。 具体的には、「バーコードリーダーが実装可能なJavaScriptライブラリについて」まとめていこうかと思います！ …というのも、半年前程に自分が所属するプロジェクトから「ブラウザベースでバーコードリーダーを実装してほしい」というオーダーがありまして。 また、「アプリ形式ではなく ブラウザから 利用したい」という条件付き。 ((アプリ形式
スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。
こんにちは。開発担当の林です。 iPhone / iPad のウェブブラウザでページを見ているとき、けっこうな割合でピンチイン・ピンチアウトすると思いますが、それがどのくらい拡大されているのかを取得する方法を書きます。 また、応用でピンチイン・ピンチアウトされても、見た目のサイズを維持するにはどのくらい拡大すれば良いかということにも触れたいと思います。 広告バナーなんかでよく使われてるアレの仕組みです。何かのお役に立てれば幸いです。 ウェブページがどのくらい拡大されているのかを取得する // ページの幅 ÷ 表示されている幅（この行だけでいいかな） var zoomer = document.body.clientWidth / window.innerWidth; // 以下で拡大率を目視できるでしょう alert( zoomer ); // 小数点がたくさんつくので、第二位までに丸め込
JavaScriptでiOSアプリが書けるライブラリJavaScriptBridgeを公開しました - 24/7 twenty-four seven
kishikawakatsumi/JavaScriptBridge · GitHub 前にiOS 7から導入されたJavaScriptCore.frameworkを使ってUIKit標準のクラスを操作する話を書きました。 JavaScriptだけでiOSのUIを書いてみる - 24/7 twenty-four seven JavaScriptCoreを使ってJavaScriptからObjective-Cのオブジェクトを操作するのは、あらかじめJSExportプロトコルで公開しておく必要があるなど、あまり実用的ではありませんでしたが、このライブラリを導入すうることで、そういった事前準備がすでに済んでいる状態で使いはじめることができます。 また、JavaScriptからObjective-Cのクラスを定義できるなどいくつかの拡張を加えてあり、UIViewControllerのサブクラスで画面を定
» スマホでスクロールを禁止させる方法 | negic
軽めのjQuery Advent Calendar 2012の24日目の記事です！ PCサイトでスクロールを禁止させるには、bodyにoverflow: hidden;をかければスクロールができなくなるが、スマホサイトでは、一部Android端末では効くが、iOSではスクロールができてしまいます。 スマホでスクロールを止めるには、jQueryを使うと便利です。 スマホの独自イベントである、touchmoveイベントを切ればスクロールを止めることができます。 方法は下記のとおりです。 $(window).on('touchmove.noScroll', function(e) { e.preventDefault(); }); あるタイミングでスクロールさせたくなったら、off()すればいい。 $(window).off('.noScroll'); イベント名に、.noScrollとあるが、
iPhone 5とiOS 6で導入されたWebデベロップまわりのアップデートについて - Branch
Clicking the “Branch this” button next to a post lets you start your own branch to talk about it. Branching a post is perfect for when you have something to say about someone’s post or want to go on a tangent—without taking the whole conversation off track. Join our beta so you can branch posts, too.
iOS/Androidに特化したJavaScriptのMVCフレームワーク「The M Project」 | Web活メモ帳
「The M Project」はiOSやAndroid、BlackBerryなどに特化したJavaScriptのMVCフレームワークです。 モバイル端末でのHTML5を前提に構築されており、UIもかっこいい感じに出来ています。 主な機能 以下のような機能があるようです。 データバインディング localStorageによる永続データ キレイなUI（ラベル、テキストフィールド、ツールバー、タブバーなど） jQueryによるマルチデバイス対応 デモ 永続化データを使用したToDoリストが作れるデモが公開されています。 http://the-m-project.net/apps/todos2/index.html 使用にはnode.jsが必要になるとの事。 興味のある方はgitからダウンロードできますので、使ってみてください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
