5509

スマートフォンで使えるフォーム入力内容を消す×ボタンを実装するJSライブラリ

×ボタンで入力内容を消すUI

タイトルが長い・・・入力テキストを消去するUIは検索ボックス(type=search)にだけ有効で、他の(type=textなど)では使えないんですね。でもこの×ボタンの使いやすさは間違いないので。。

1ヶ月くらい前に作ったのにサンプルを作るのを面倒くさがって公開してなかったものを、サンプルキレイにして公開しておきます。

Delete Valueのサンプル
サンプルはiOSとAndroid(※1)でしか動作しません。。

問題点もあるのですが、それは後述。

Read more

動的にvideo要素の動画を入れ替えるときに気をつけること

HTML5ではvideo要素で(手軽に?)動画を再生できますが、枠だけ書き出しておいて(別にHTML直書きでいいですが)、動画を入れ替える場合は少し注意が必要です。たぶん。

現状で動画フォーマットがいくつか存在しますが、複数のフォーマットをサポートしたい場合は以下のように書きます。

動的に書き換えるので、次のような関数用意して再生したい動画のURLを入れればよさげです。

function playMovie(mp4, ogg) {
  $('#videoElm')
    .html([ // ソースファイルをつっこむ
      '',
      ''
    ].join(''));
}

playMovie(piyo.mp4, piyo.ogg);

で結局何に注意しないとあかんかっていうのは、このままだとiOSで再生ができないんですね。iOSはmp4ファイル等で再生す
るんですけど、source要素を動的につっこんでもだめな様子。。

追記:内容が曖昧すぎたので追記します。
iOSで再生ができない

iOSで入れ替えた動画が読み込まれず再生できない

なので以下のようになりました。
source要素を動的につっこむのではなく、素直にsrc属性に入れてるだけです。

function playMovie(mp4, ogg) {
  if ( /AppleWebKit/.test(navigator.userAgent) ) {
  // iOSのとき
    $('#videoElm')
      .attr('src', mp4); // 素直にsrc属性に書く
  } else {
  // iOS以外
    $('#videoElm')
      .html([
        '',
        ''
      ].join(''));
  }
}

※ UA判定はもっと良い方法あったらそっち使ってください。

Author

nori
nori
- UI Engineer
Location
- ,