iphoneのブラウザで文字列を選択できない

iphoneのブラウザで文字ができない現象に遭遇。通常文字列を長タップすると選択およびコピーのポップアップが出るが、それがでなくなる。

出なくなる条件。

  • タグを含まない文字列が長く続く
  • line-heightの値が250%などと大きい
  • viewport(スマホサイズの指定)がある
  • 以上3つの条件が揃うとコピーができない。文字列の長さを短くしたり、line-heightの値を小さくするとコピーができるようになる。viewportの指定を外せば、タグを含まない長い文字列でも、line-heightが大きい値でもコピーに支障なし。

    現象はiphone5s(iOS9.3.2) と iphone6s(iOS9.3.3) で確認。それぞれの端末で選択できなくなるまでの文字数が違う。この違いが、画面の大きさからか、スペックからか、OSのバージョンからなのかは不明。

    対症療法として文字列中の適当な箇所になどのタグを入れるとコピーできるようになる。

    2016/09/22 追記
    原因判明。読み込んでいた二つのcssファイルそれぞれに #content があった。一つ消したら不具合もなくなった。

    さくらのサブドメインを別のサーバーで使いたい

    やりたいこと

    現在、さくらレンタルサーバーAでドメインとサブドメイン一個を運用中。ドメイン自体はお名前.comで取得したもの。

    これにサブドメインをもう一個追加したい。追加先は新しく契約したさくらレンタルサーバーB。

    現在
    -------------------------
    ドメイン ← さくらレンサバAで運用中
    サブドメイン ← さくらレンサバAで運用中
    -------------------------

    こうしたい
    -------------------------
    ドメイン ← さくらレンサバAで運用中
    サブドメイン ← さくらレンサバAで運用中
    新サブドメイン ← さくらレンサバBに追加
    -------------------------

    さくらレンサバBにサブドメインの設定をして、ドメイン取得元のお名前.comでDNS設定をする。

    参考:サブドメインの設定方法メモ

    しかし、設定が完了し時間をおいても一向にサブドメインにアクセスできない。IEでアクセスしても「見つかりません」エラーが返ってくる。Chormeでアクセスするとエラー内容の詳細が分かった。

    エラー内容
    ----------------------------------------------------------
    The requested URL /php.cgi/index.html was not found on this server.
    ----------------------------------------------------------

    ようは、新しいサブドメインのルートフォルダにphp.cgiがなかったからで、コピーしたら動いた。

    参考:さくらインターネットでPHPを.htmlで動かす.htaccessの設定方法

    さくらのmysqlサーバーのサブドメインを指定した別サーバーからもログイン可能。(レンサバAのmysqlサーバーにレンサバBからログインができる)

    【CSS】android4.xでposition:fixedで上下左右中央揃え

    position:fixedで上下左右中央揃えをする方法をネットで調べた。

    -------------------------------
    .box1{
    position: fixed !important;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    margin:auto;
    width:145px;
    height:145px;
    }
    -------------------------------

    しかしandroid4.x系だとうまくいかないらしく自分のはまる。

    対策、これでうまくいく。

    -------------------------------
    .box1{
    position: fixed !important;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    }
    -------------------------------

    参考;

    http://youknow.jp/web/css-position

    【javascript】getElementByIdとgetElementsByClassNameの違い

    javascriptのgetElementByIdで値を取得したようにgetElementsByClassNameで値を取得しようとすると取得できなかった。getElementsByClassNameはたんにgetElementByIdのClass版ではなかった。

    getElementByIdとgetElementsByClassNameでは戻り値が違う。

    getElementByIdの戻り値
    -----------------------------------------------------
    存在する場合は要素(オブジェクト)を返し、存在しない場合はnullを返す。
    -----------------------------------------------------

    getElementsByClassNameの戻り値
    -----------------------------------------------------
    存在する場合は1個以上のHTMLCollectionを返し、
    存在しない場合は0個のHTMLCollectionを返す。
    -----------------------------------------------------

    getElementById
    getElementsByClassName

    getElementByIdがオブジェクトを返すのに対して、getElementsByClassNameは配列っぽいものを返す。複数返すからgetElementsByClassNameなのね。

    //idにクリックイベントを設置
    -----------------------------------------------------
    document.getElementById('content').click = function (e){
    alert("クリックされた");
    }
    -----------------------------------------------------

    //classにクリックイベントを設置
    -----------------------------------------------------
    document.getElementsByClassName('box1')[0].onmouseup = function (e){
    alert("クリックされた");
    }
    -----------------------------------------------------

    ルビつきの文章からルビを削除してコピペする

    ルビだけコピーしたくない

    上のページを参考にルビつきの文章を選択してボタンを押すとアラートでルビなしの選択テキストが表示されるスクリプトを書いたのでメモ。

    -------------------------------------------
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>a</title>
    </head>
    <body>
    <section>
    <h2>おはなし</h2>
    <p>
    <ruby><rb>親譲</rb><rp>(</rp><rt>おやゆず</rt><rp>)</rp></ruby>りの<ruby><rb>無鉄砲</rb><rp>(</rp><rt>むてっぽう</rt><rp>)</rp></ruby>で小供の時から損ばかりしている。
    </p>
    </section>
    <div id="foot_bt">
    ルビなし文章をアラート
    </div>
    </body>
    </html>
    -------------------------------------------

    //採用したのはこちら
    -------------------------------------------
    //いったん削除する
    var rtList = document.getElementsByTagName("rt");
    var contentList = [];
    Array.prototype.forEach.call(rtList, function(rt) {
    contentList.push(rt.textContent); //配列に入れる
    rt.textContent = ""; //空にする
    });

    //選択した文章を代入
    selection_text = document.getSelection().toString();

    //削除したやつを戻す
    setTimeout(function() {
    Array.prototype.forEach.call(rtList, function(rt) {
    rt.textContent = contentList.shift();
    });
    }, 0);
    -------------------------------------------

    最初の参考ページにdisplay:none;でルビを消す方法も載っているが、選択したテキストを取得する場合、IE11ではルビが残ってしまい無理だった。
    参考:選択中文字列の取得 ブラウザによる違い

    このページも役に立った

    http://mamewaza.com/support/blog/howto-use-range-selection.html

    【javaScript】インラインフレーム内のテキストを選択して取得する

    選択したテキストを取得して確認するために、アラートで表示するスクリプトをつくった。

    test.js
    -------------------------------------------------------
    //ボタンが押されたら
    $('#test_bt').on('click', function () {

    var selObj = document.getElementById('iframe').contentDocument.getSelection();

    //もしくはこちら
    //var selObj = document.getElementById('iframe').contentWindow.getSelection();

    alert("選択した文字列: " + selObj); //アラートで表示

    });
    -------------------------------------------------------

    test.html
    -------------------------------------------------------
    <div class="ifrm-container">
    <iframe src="iframe_test.html"></iframe>
    </div>
    <div>
    <input type="button" value="ボタン" id="test_bt">
    </div>

    -------------------------------------------------------

    あらかじめテキストを選択しておいて、ボタンが押されたら選択されたテキストがはいったアラートを表示する方法をとったのだが、android だとボタンを押すとテキストの選択が解除される。「選択解除」 → 「選択テキストを取得してアラートを表示」の順番になるのでうまく取得できない。

    <<追記>>
    android でも選択したテキストをアラートで表示できた。

    test.js
    //touchend のタイミングでテキストを保存しておけばいい
    -------------------------------------------------------
    selection-text = "global"; //グローバル変数をつくっておく
    $(window).on("load", function(e){

    $("#iframe").contents().find("div").on("touchend", function(e){

    //ここでグローバル変数にテキストを保存しておく
    $(this).data('selection-text',window.getSelection());

    });
    });
    -------------------------------------------------------

    touchend 指を離したタイミングでアラートする場合

    //touchend のタイミングで取得
    -------------------------------------------------------
    $(window).on("load", function(e){

    $("#iframe").contents().find("div").on("touchend", function(e){

    var selObj = document.getElementById('iframe').contentDocument.getSelection();
    alert("選択した文字列: " + selObj);

    });
    });
    -------------------------------------------------------

    iPhoneで長文のテキストが選択しにくい

    iPhone の safari でテキストを選択しようとすると選択がしにくい。長押ししてもテキストを選択できる確率は三回に一回以下だった。

    選択できない(しずらい)テキストには特徴がある。長文で改行などのタグが一切入ってないこと。解決策はタグを入れる。

    //タグなしなのでテキストを選択しづらい
    ----------------------------------------------------------
    ぶうと云いって汽船がとまると、艀はしけが岸を離はなれて、漕こぎ寄せて来た。船頭は真まっ裸ぱだかに赤ふんどしをしめている。野蛮やばんな所だ。もっともこの熱さでは着物はきられまい。日が強いので水がやに光る。見つめていても眼めがくらむ。事務員に聞いてみるとおれはここへ降りるのだそうだ。見るところでは大森おおもりぐらいな漁村だ。人を馬鹿ばかにしていらあ、こんな所に我慢がまんが出来るものかと思ったが仕方がない。威勢いせいよく一番に飛び込んだ。続つづいて五六人は乗ったろう。外に大きな箱はこを四つばかり積み込んで赤ふんは岸へ漕ぎ戻もどして来た。陸おかへ着いた時も、いの一番に飛び上がって、いきなり、磯いそに立っていた鼻たれ小僧こぞうをつらまえて中学校はどこだと聞いた。小僧はぼんやりして、知らんがの、と云った。気の利かぬ田舎いなかものだ。猫ねこの額ほどな町内の癖くせに、中学校のありかも知らぬ奴やつがあるものか。ところへ妙みょうな筒つつっぽうを着た男がきて、こっちへ来いと云うから、尾ついて行ったら、港屋とか云う宿屋へ連れて来た。やな女が声を揃そろえてお上がりなさいと云うので、上がるのがいやになった。門口へ立ったなり中学校を教えろと云ったら、中学校はこれから汽車で二里ばかり行かなくっちゃいけないと聞いて、なお上がるのがいやになった。おれは、筒っぽうを着た男から、おれの革鞄かばんを二つ引きたくって、のそのそあるき出した。宿屋のものは変な顔をしていた。
    ----------------------------------------------------------

    ↓↓↓↓↓↓↓↓↓

    //適当に改行タグを入れると選択しやすくなる
    ----------------------------------------------------------
    ぶうと云いって汽船がとまると、艀はしけが岸を離はなれて、漕こぎ寄せて来た。船頭は真まっ裸ぱだかに赤ふんどしをしめている。<br>野蛮やばんな所だ。もっともこの熱さでは着物はきられまい。日が強いので水がやに光る。見つめていても眼めがくらむ。事務員に聞いてみるとおれはここへ降りるのだそうだ。見るところでは大森おおもりぐらいな漁村だ。<br>人を馬鹿ばかにしていらあ、こんな所に我慢がまんが出来るものかと思ったが仕方がない。威勢いせいよく一番に飛び込んだ。続つづいて五六人は乗ったろう。外に大きな箱はこを四つばかり積み込んで赤ふんは岸へ漕ぎ戻もどして来た。<br>陸おかへ着いた時も、いの一番に飛び上がって、いきなり、磯いそに立っていた鼻たれ小僧こぞうをつらまえて中学校はどこだと聞いた。小僧はぼんやりして、知らんがの、と云った。気の利かぬ田舎いなかものだ。猫ねこの額ほどな町内の癖くせに、中学校のありかも知らぬ奴やつがあるものか。<br>ところへ妙みょうな筒つつっぽうを着た男がきて、こっちへ来いと云うから、尾ついて行ったら、港屋とか云う宿屋へ連れて来た。やな女が声を揃そろえてお上がりなさいと云うので、上がるのがいやになった。門口へ立ったなり中学校を教えろと云ったら、中学校はこれから汽車で二里ばかり行かなくっちゃいけないと聞いて、なお上がるのがいやになった。<br>おれは、筒っぽうを着た男から、おれの革鞄かばんを二つ引きたくって、のそのそあるき出した。宿屋のものは変な顔をしていた。
    ----------------------------------------------------------
    (坊っちゃん 夏目漱石)

    【JQuery】iPhoneでのiframeの設定とスクロール

    iPhoneでは、iframeの高さが設定できないので、フレームをはみ出る大きなコンテンツもスクロールバーは表示されず、iframeのサイズが無視されて表示される。

    解決するには、iframeの真上の要素にサイズを設定する。

    sample.php
    ----------------------------------------
    <?php //スクロール量表示場所 ?>
    <div id="log"></div>

    <div class="ifrm-container">
    <iframe src="iframe_test.html" id="iframe" class="ifrm" scrolling="auto"></iframe>
    </div>
    ----------------------------------------

    sample.css
    ----------------------------------------
    .ifrm-container {
    width:300px;
    height:400px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    }

    .ifrm {
    width:100%;
    height:100%;
    border:none;
    display:block;
    }
    ----------------------------------------

    参考サイト

    jqueryでスクロールバーを操作する場合は、iPhoneでは、iframeをかこう要素にイベントを設定、それ以外ではiframe要素自身にイベントを設定する

    //iPhone以外で100スクロールさせる
    ----------------------------------------
    $($("#iframe").contents()[0]).scrollTop(100);

    //スクロール量の表示
    $( $('#iframe')[0].contentWindow ).scroll(function () {
    var st = $($("#iframe").contents()[0]).scrollTop();
    $("#log").html(st);
    // });

    ----------------------------------------

    //iPhoneで100スクロールさせる
    ----------------------------------------
    $(".ifrm-container").scrollTop(100);

    //スクロール量の表示
    $('.ifrm-container').scroll(function () {
    var st = $(".ifrm-container").scrollTop();
    $("#log").html(st);
    });
    ----------------------------------------

    参考:【jquery】iframe内のスクロールイベント設定とスクロール量取得

    ただし、iPhoneで表示されるiframeは仕様上テキストが選択できない。テキストが選択したい場合は、擬似フレームを使う。

    テキストが選択できない理由はこれだった↓↓
    iPhoneで長文のテキストが選択しにくい

    【JQuery】iframe内をタップしたらイベントを発火させる

    sample.html
    -------------------------------------------
    <!DOCTYPE HTML>
    <html>

    <head>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/test.js" type="text/javascript"></script>
    </head>
    <body>
    <iframe src="iframe_test.html" id="iframe"></iframe>
    </body>
    </html>
    -------------------------------------------

    iframe_test.html
    -------------------------------------------
    <html>
    <head>
    </head>
    <body>
    <div>
    インラインフレームの内容
    </div>
    </body>
    </html>
    -------------------------------------------

    test.js
    -------------------------------------------
    //iframeの内容が完全に読み込まれたら
    $(window).on("load", function(e){
    //iframeにはタッチやクリックイベントは発行されないためこういう記述
    $("#iframe").contents().find("body").on("touchstart", function(e){
    alert("タップされた");
    });
    });
    -------------------------------------------

    参考ページ1 
    参考ページ2

    ただ、これだとiPhoneのsafariだと「click」うまく動作しない。「touchstart」なら動く。理由はこれだと思う。
    iPhoneのsafariだとbody要素に登録したclickは無効なのでdivなどに登録先を変える。

    -------------------------------------------
    $("#iframe").contents().find("body").on("click", function(e){
    alert("タップされた");
    });
    -------------------------------------------

    ↓↓↓↓↓↓↓↓↓

    -------------------------------------------
    $("#iframe").contents().find("div").on("click", function(e){
    alert("タップされた");
    });
    -------------------------------------------

    iframe内の部品がクリックされたイベントを起こす場合は↓

    ■sample.html
    -------------------------------------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <title>Test</title>
    <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
    $("#hoge").contents().find("#fuga").bind("click", function() {
    alert("hogehoge");
    });
    })
    </script>
    <iframe id="hoge" src="hoge.html"></iframe>
    -------------------------------------------

    ■hoge.html
    -------------------------------------------
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <title>hoge.html</title>
    <button id="fuga">PUSH!!</button>
    -------------------------------------------
    参考:http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1036893315

    【JQuery】異なるイベントで同じ関数を実行する

    異なるイベントで同じ関数を実行させたい場合、イベント発生時の処理用に共通の関数を定義して、それぞれのイベントから実行させる。

    サンプルスクリプト
    -----------------------------------------------
    //検索欄でenterキーが押されたら実行
    $('#kensaku-form').keydown(function() {
    if( event.keyCode == 13 ) {
    myFunc();
    return false; //enterキー無効
    } //if
    });

    //もしくは検索ボタンが押されたら実行
    $('#kensaku-button').click(function(){
    myFunc();
    });

    //実行される共通の関数
    function myFunc() {
    alert('イベントが実行されました');
    };
    -----------------------------------------------

    3 / 2712345...1020...最後 »