javascript - iOS Phonegap の複数行テキスト選択バグ?

Question

pユーザーが要素内のテキストを選択し、必要に応じて変更するテキストを「コピー」する必要がある Phonegap アプリを作成しています。

ただし、pタグ内のテキストの選択には問題があります。テキストはサーバーから取得され、次のように出力されます。

<p style="white-space:pre-wrap">Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus 


vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. 

Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora
</p>

これにより、タグを使用せずにテキストが改行を保持できるようになります<br/>。タグは現在、私の Javascript 内では機能しません。

とにかく、この要素でテキストを選択しようとすると、p代わりに要素全体が選択されます。単語を選択し、境界を移動してさらにテキストを選択した場合の遷移を次に示します。

ここに画像の説明を入力

注:別のテキストでスクリーンショットを撮ったため、最初のシーケンスではテキストが異なりますが、効果は同じです。

Phonegap でのみ複製されているように見えるため、これに jsFiddle を提供することはできませんが、テスト用にソースをアップロードしました: http://cl.ly/2w0O1d3l3h17

プロジェクトには JS はありませんが、HTML と CSS は次のようになります。

HTML:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="cordova-2.5.0.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </head>
    <body>
        <p class="text">Adobe Acrobat Test Page
        Acrobat Reader is properly installed.
        Click here to go back to information about using PDF.

        Guidance for Using PDF Documents

            California Home

            Search

            My CA

        This Site

        Guidance for Using PDF Documents

        Patient Advocate Home
        About the Office

        Some documents on this Web site are available in Adobe Acrobat Portable
        Document Format (PDF). These documents are identified by the
        symbol.
        q What is PDF?

        About the Patient
        Advocate

        q

        Download Adobe Acrobat Reader

        q

        Viewing Requirements

        A Message from the
        Patient Advocate

        q

        How to Use a PDF Document

        q

        Electronic Fill-in-the-Blank PDF Forms

            q

            Accessibility Tools for Visually Impaired Users

        State of California HMO
        Report Card
        Tips on Exercising Your
        HMO Rights
        HMO Terms Explained
        Mobile Information
        Center
        Schedule a Meeting or
        Speaking Engagement

        What is PDF?
        PDF is a portable document format developed by Adobe Systems. PDF
        documents are widely used on the Internet, including the this web server, for
        several reasons:
        q A PDF has the same appearance, colors, fonts, graphics and layout as
        the printed document.
        PDF files can be viewed in the browser, or saved for off-line use or
        printed.

        q

        The Acrobat Reader software is freely available for most operating
        systems.

        q

        Events and Event
        Calendar

        q

        While the Reader software can't edit (change) a PDF document, it can
        copy text from the document and perform word or text-string searches
        of the document.

        Photo Gallery

        Return to Top

        http://www.opa.ca.gov/support/pdf/ (1 of 3) [12/26/2001 6:11:06 AM]

        Guidance for Using PDF Documents

        Viewing Requirements
        To view PDF documents you need to use a PDF file viewer such as Acrobat
            Reader or Acrobat Exchange from Adobe Systems Incorporated.
            You may download and install Acrobat Reader free of charge.
            Please upgrade your browser and PDF viewer to the latest version to
        avoid any problems.
        Contact Us
        Customer Service
        Survey
        Help with PDF
        Conditions of Use
        Privacy Policy

        To check if you have Adobe Acrobat Reader installed, click here. If you are
        prompted to download hit cancel, this means that you do not have it installed.
        Click here to download Acrobat Reader now.
        If you experience any problems with PDF documents, upgrading your
        browser and/or PDF viewer to the latest version usually solves the problem.
        If after upgrading your software you are still unable to view PDF documents
        click here to view Adobe's help section. You may also send E-mail to the
        webmaster for further assistance regarding PDF or technical issues
        concerning this Web site.
        Return to Top
        How to Use a PDF Document
        q Download Adobe Acrobat Reader
        q
        q
        q
        q

        Install Acrobat Reader on your computer.
        Start your web browser and locate a PDF document on the Web.
        Click on the hypertext link for the PDF file.
        If you want to save the file for future reference, follow your browser's
        instructions for saving files from the Internet (often this requires
        pressing the shift key while clicking once on the filename).
        Return to Top

        Electronic Fill-In-The-Blank PDF Forms
        NOTE: Use of PDF fill-in-the-blank forms does NOT include online
        submittal.
        Some PDF forms are available in a fill-in-the-blank format. Users now have
        the option—on certain OPA forms—to complete the PDF forms
        electronically, instead of manually writing or typing the information on a hard
        copy version.
        The form can be completed in several easy steps.
        q The user opens the PDF form in Acrobat Reader—in the browser or as
        a standalone product. The user can also save the PDF form to their
        computer system and open the form in Acrobat Reader at a later time.
        q Once the form is open, the user clicks on the desired field and a
        http://www.opa.ca.gov/support/pdf/ (2 of 3) [12/26/2001 6:11:06 AM]

        Guidance for Using PDF Documents

        q

        q

        blinking cursor appears.
        After the information has been entered in the field, the user can tab to
        the next field.
        After all the fields have been completed, the user can print out the
        page.
        NOTE: If the cursor is blinking in a field, the information in that field
        will not be printed. Hit "Return" or "Enter" and the information will be
        captured for all fields.

        Users with Acrobat Reader only, the entered data cannot be saved for later
        use.
        For those who have the entire Acrobat suite—Acrobat, formerly called
        Acrobat Exchange—the data can either be saved separately or as a part of the
        form. If you save the data-only, it will take up less disk space and can be
        imported back into the same form at any time, provided the form has not
        changed. For more information on exporting and importing form data, check
        your manual.
        Return to Top
        Accessibility Tools for Visually Impaired Users
        Access.adobe.com provides a set of free tools that allow visually disabled
        users to read documents in Adobe PDF format. These tools convert PDF
        documents into either HTML or ASCII text, which can then be read by many
        screen-reading programs.

        © 2000 State of California. Gray Davis, Governor. Conditions of Use Privacy Policy

        http://www.opa.ca.gov/support/pdf/ (3 of 3) [12/26/2001 6:11:06 AM]

        </p>
    </body>
</html>

CSS:

.text{
    white-space:pre-wrap;
    word-wrap: break-word;
    height:300px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    padding:10px;
    border:1px solid #000;
    background-color:#fff;
}

私が見つけた1つの潜在的な解決策はcontenteditable="true"、p要素で使用することですが、これにはいくつかの欠点があります:

要素内にこれ以上タグを作成することはできません
キーボードが表示されない

私が見つけた別の解決策は、preフォーマットを削除することです。ただし、これにより、理想的には保持したい改行が削除されます。

score 7 · Accepted Answer

問題は、iOS のネイティブ選択エンジンが個別の単語または要素全体のいずれかを選択することです。また、テキスト全体を保持する単一の要素があるため、複数の行を選択しようとすると<p>、ネイティブ選択エンジンが要素全体を選択します。<p>あなたがすべきことは、選択エンジンに複数の行を選択できるようにしたいという「ヒント」を与えることです。たとえば、テキストの各行を個別のブロックレベル要素<div>に配置することで、これを実現できます。

<p class="text">要素内のテキストを解析し、テキストの各行を個別の要素に配置するスクリプトの例を次に示します。改行なしの文字エンティティ<div>を使用して、改行、空行、および各行の先頭のスペースを保持します。

var textElm = document.getElementsByClassName("text")[0],
    text = textElm.textContent,
    html = "";

html = text.replace(/([\t ]*)(.*)\n/g, function(match, spaces, text) {
    if (spaces === "" && text === "") spaces = " "; // Make sure empty lines are rendered by adding single &nbsp; to <div>
    return "<div>" + Array(spaces.length + 1).join("&nbsp;") + text + "</div>"
});

textElm.innerHTML = html;

ここに画像の説明を入力

white-space:pre-wrap;その後、不要になった CSS から削除することもできます。

score 0 · Accepted Answer

これに対する解決策は、コンテンツ全体をpタグなどに入れ、通常はで区切られる各段落を<br />、次のような偽の改行で区切ることです。

<a class="space"></a>

通常はインライン要素であれば、次の CSS を適用できます。

.space{
    display:inline-block;
    height:15px;
    width:100%;
}

javascript - iOS Phonegap の複数行テキスト選択バグ?

2 に答える 2

Related

Reference