iOS Phonegap多行文字select错误？
我正在创build一个PhoneGap应用程序，要求用户在p元素内select文本，然后将修改它的文本“复制”到我的需要。
然而，在p标签内select文本存在一个问题。 从我的服务器中检索文本，输出如下所示：
<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中。
无论如何，当你尝试在这个元素中select文本时，整个p元素被选中。 以下是select单词时发生的变化，然后移动界限以select更多文本：
注意：文本在第一个序列中是不同的，因为我用不同的文本截取了屏幕截图，但效果依然如此。
我不能提供一个jsFiddle，因为它似乎只能在Phonegap中复制，但我已经上传了我的源代码来testing： 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; }
我发现的一个可能的解决scheme是在p元素上使用contenteditable="true" ，但这有一些缺点：
- 我不能在元素中创build更多的标签
- 我无法显示键盘
我发现另一个解决scheme是删除pre格式。 但是，这样可以消除我希望保留的换行符。
你的问题是，iOS的本地select引擎select单独的单词或整个元素。 而且由于您有一个包含整个文本的<p>元素，当您尝试select多行时，本机select引擎会select整个<p>元素。 你应该做的是“提示”select引擎，你想能够select多行。 您可以通过将每行文本放入单独的块级元素 （例如<div> 。
下面是一个示例脚本，用于parsing<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 to <div> return "<div>" + Array(spaces.length + 1).join(" ") + text + "</div>" }); textElm.innerHTML = html;
那么你也可以删除white-space:pre-wrap; 从CSS，因为它不再需要。
解决这个问题的方法是把整个内容放在一个p标签或者任何东西里，然后把每个通常用<br />隔开的段落分隔成一个像这样的假行：
<a class="space"></a>
它可以是任何通常的内联元素，然后我们将给以下的CSS：
.space{ display:inline-block; height:15px; width:100%; }