WEBサイトの製作、管理、とかの日記ブログです。

<<   2018年09月   >>
SunMonTueWedThuFriSat
      1
2345678
9101112131415
16171819202122
23242526272829
30      
新着記事
カテゴリ
過去ログ
コメント
検索
スマホでチップヘルプやってみた
タッチパネルデバイスだとマウスカーソルがないからtitle属性のチップヘルプ(ツールチップ)が表示されない。

というわけで、JavaScriptでやってみた。

コード
<script> if(document.addEventListener) document.addEventListener("DOMContentLoaded",tipSet); function tipSet(){ var obj=document.getElementsByTagName('li'); for(var i=0;i<obj.length;i++){ if(!obj[i].title) continue; obj[i].addEventListener('touchend',tipOpen); } } function tipOpen(e){ window.getSelection().removeAllRanges(); e.preventDefault(); var obj=document.createElement('div'); obj.id='tip'; obj.style.position='absolute'; obj.style.backgroundColor='black'; obj.style.color='white'; obj.style.top=e.target.offsetTop+e.target.clientHeight+1+'px'; obj.style.left=e.target.offsetLeft+'px'; obj.style.lineHeight='1em'; obj.style.padding='0.5em'; obj.style.marginRight='0.5em'; obj.appendChild(document.createTextNode(e.target.title)); window.addEventListener('touchstart',tipClose); e.target.parentNode.appendChild(obj); } function tipClose(){ var obj=document.getElementById('tip'); obj.parentNode.removeChild(obj); window.removeEventListener('touchstart',tipClose); } </script> <ul> <li title="ヘルプ1">項目1</li> <li title="ヘルプ2">項目2</li> <li title="ヘルプ3">項目3</li> </ul>

サンプル
  • 項目1
  • 項目2
  • 項目3

title属性つきなのでマウスカーソルがあれば普通にチップヘルプ出ます。
スマホ等のタッチパネルデバイスの場合は touchend で真下に表示して、どこかタッチで消えます。

画面右端に溢れる場合に座標調整必要かとも思ったが、表示内容が日本語なら自動改行してくれるし、右にmarginつける程度で良さそう。
marginとpaddingはフォントサイズ依存でem単位にした。

画面下端にはみ出す場合は上に表示したほうが良いと思うが、めんどくさいし、
今回の目的のページでは画面下にfixedの要素が表示される場合があるので難しいので何もしてない。

タッチイベントの時に同時にテキスト選択が発生する可能性があるが、
チップヘルプ表示時にセレクションを削除して、ブラウザ標準動作をキャンセルした。
だが、テキスト選択を解除しても選択文字列のWEB検索みたいな領域が閉じない場合があるみたい。どうにもならんと思う。

JavaScriptを使わずにCSSだけでスマホ対応チップヘルプを作るというのも不可能じゃないらしいのだが、
かなり力技になるはずなのでJavaScriptでやったほうが良いと判断した。

この記事へのコメント
このブログ、スマホ対応不十分ね。
縮小されちゃうからチップヘルプがめっちゃ小さいw

あと、<pre>と<code>使うとフォントがちっちゃくなるのね。
管理人 2018-08-18 15:29:25
名前:
URL
コメント:
この記事へのトラックバック :
whblog 1.7