我正在创建一个 Phonegap 应用程序，它要求用户在 p 中选择文本元素，然后“复制”根据我的需要修改它的文本。
但是，在 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元素被选中。这是当您选择一个词时发生的过渡，然后移动边界以选择更多文本:
注意:第一个序列中的文字不同，因为我用不同的文字截屏，但效果还是一样。
我无法为此提供 jsFiddle，因为它似乎只在 Phonegap 中复制，但我已经上传了我的源代码进行测试: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;
}
我发现的一个潜在解决方案是使用 contenteditable="true"在 p 上元素，但这有一些缺点:
- 我不允许在元素中创建更多标签
- 我无法显示键盘
我找到的另一个解决方案是删除 pre格式化。然而，这会删除换行符，我希望保留这些换行符。
最佳答案
您的问题是 iOS 的本地选择引擎选择单独的单词或整个元素。因为你有一个 <p>包含整个文本的元素 native 选择引擎选择整个<p>当您尝试选择多行时。您应该做的是“提示”您希望能够选择多行的选择引擎。您可以通过将每一行文本放入单独的 block level element 来实现。 ，例如 <div> .
这是一个解析 <p class="text"> 中文本的示例脚本元素并将每一行文本放入单独的 <div> 中元素使用 non-breaking-space 在每行的开头保留新行、空行和空格字符实体。
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，因为不再需要它。
关于javascript - iOS Phonegap 多行文本选择错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15488751/