iOS Phonegap多行文本选择错误？ [英] iOS Phonegap multi-line text select bug?
本文介绍了iOS Phonegap多行文本选择错误？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建一个Phonegap应用程序，要求用户选择 p 元素内的文本，然后复制修改它的文本到我需要。 p>
但是，在 p 标签中选择文本时存在问题。从我的服务器检索文本，其中输出如下：
< p style =white-space： wrap> Proin quis tortor orci。 Etiam at risus et justo dignissim congue。 Donec congue lacinia dui，porttitor lectus condimentum laoreet。 Nunc eu ullamcorper orci。 Quisque eget odio ac lectus
vestibulum faucibus eget in metus。在pellentesque faucibus前庭。 Nulla在nulla justo，eget luctus tortor。 Nulla facilisi。
Duis在白色的等分试样。 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 /> 选择整个 p 元素。以下是选择字词时发生的转换，然后移动边界以选择更多文字：
注意：第一个序列中的文本不同，
我无法提供一个jsFiddle，因为它似乎只是在Phonegap中复制，但是，我已上传我的来源进行测试： http://cl.ly/2w0O1d3l3h17
在项目中没有JS，但HTML和CSS看起来像这样：
HTML：
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< meta name =format-detectioncontent =telephone = no/>
< meta name =viewportcontent =user-scalable = no，initial-scale = 1，maximum-scale = 1，minimum-scale = 1/>
< link rel =stylesheettype =text / csshref =css / index.css/>
< title> Hello World< / title>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.jstype =text / javascript>< / script>
< script type =text / javascriptsrc =cordova-2.5.0.js>< / script>
< script type =text / javascriptsrc =js / index.js>< / script>
< script type =text / javascript>
app.initialize（）;
< / script>
< / head>
< body>
< p class =text> Adobe Acrobat测试页
Acrobat Reader已正确安装。
点击这里返回有关使用PDF的信息。
使用PDF文档的指导
加利福尼亚州首页
搜索
我的CA
本网站
使用PDF文档的指导
患者支持主页
关于办公室
本网站上的一些文件可用Adobe Acrobat Portable
文档格式（PDF）。这些文档由
符号标识。
q什么是PDF？
关于病人
倡导者
q
下载Adobe Acrobat Reader
q
查看要求
来自
的消息病人主张
q
如何使用PDF文档
q
电子填写空白PDF表格
q
视力受损用户的辅助工具
加利福尼亚州HMO
报告卡
行使提示您的
HMO权利
HMO条款解释
移动信息
中心
安排会议或
说到参与
什么是PDF？
PDF是由Adobe Systems开发的便携式文档格式。 PDF
文档在因特网上广泛使用，包括此Web服务器，对于
有几个原因：
q PDF具有与
相同的外观，颜色，字体，图形和布局打印文档。
PDF文件可以在浏览器中查看，或保存为离线使用或
打印。
q
Acrobat Reader软件可免费用于大多数操作的
系统。
q
事件和事件
日历
q
当Reader软件无法编辑）一个PDF文档，它可以
从文档中复制文本并执行单词或文本字符串搜索
的文档。
照片库
返回页首
http://www.opa.ca.gov/support/pdf/（第1页，共3页） [12/26/2001 6:11:06 AM]
使用PDF文档的指导
查看要求
要查看PDF文档，您需要使用PDF文件查看器，例如Acrobat
Adobe Systems Incorporated的Reader或Acrobat Exchange。
您可以免费下载并安装Acrobat Reader。
请将浏览器和PDF查看器升级到最新版本为
，以避免出现任何问题。
联系我们
客户服务
调查
帮助PDF
使用条件
隐私政策
检查您是否安装Adobe Acrobat Reader，点击这里。如果你是
提示下载命中取消，这意味着你没有安装它。
点击这里下载Acrobat Reader。
如果您在使用PDF文档时遇到任何问题，将
浏览器和/或PDF查看器升级到最新版本通常可以解决问题。
如果在升级软件后，您仍然无法查看PDF文档
点击此处查看Adobe的帮助部分。您还可以向
网站管理员发送电子邮件，以获取有关本网站的PDF或技术问题
的进一步帮助。
返回页首
如何使用PDF文档
q下载Adobe Acrobat Reader
q
q
q
q
安装Acrobat Reader在您的计算机上。
启动Web浏览器并在Web上找到PDF文档。
单击PDF文件的超文本链接。
如果要保存文件以供将来参考，请按照浏览器的
指令从互联网保存文件（通常这需要
按Shift键同时单击文件名）。
返回页首
电子填写空白PDF表格
注意：使用PDF填空表格不包括在线
提交。
一些PDF表单提供空白填充格式。用户现在拥有
的选项 - 在某些OPA表格上 - 以电子方式完成PDF表单
，而不是手动在硬
副本上书写或输入信息。
该表单可以通过几个简单的步骤完成。
q用户在浏览器中使用Acrobat Reader打开PDF表单，或者作为
单独的产品打开。用户还可以将PDF表单保存到
计算机系统，稍后在Acrobat Reader中打开表单。
q一旦表单打开，用户点击所需的字段和
http://www.opa.ca.gov/support/pdf/（2之3）[12/26/2001 6:11:06 AM]
使用PDF文档的指导
q
q
闪烁光标出现。
在字段中输入信息之后，用户可以标签到
下一个字段。
所有字段完成后，用户可以打印出
页面。
注意：如果光标在字段中闪烁，则不会打印该字段
中的信息。点击Return或Enter，信息将为所有字段捕获
。
仅具有Acrobat Reader的用户，输入的数据无法保存以供以后使用
。
对于拥有整个Acrobat Suite-Acrobat（以前称为
Acrobat Exchange）的用户，可以单独保存数据，也可以将其作为
表单的一部分保存。如果您保存的数据，它将占用较少的磁盘空间，并可以
导入回同一形式在任何时候，只要该表单没有
更改。有关导出和导入表单数据的更多信息，请查看
您的手册。
返回页首
视力受损用户的辅助工具
Access.adobe.com提供了一组免费工具，允许视觉禁用的
用户以Adobe PDF格式阅读文档。这些工具将PDF
文档转换为HTML或ASCII文本，然后可以通过许多
屏幕阅读程序读取。
©2000加利福尼亚州。格雷戴维斯，州长。使用条件隐私政策
http://www.opa.ca.gov/support/pdf/（3之3）[12/26/2001 6:11:06 AM]
< / p>
< / body>
< / html>
CSS：
code> .text {
white-space：pre-wrap;
word-wrap：break-word;
height：300px;
overflow：scroll;
-webkit-overflow-scrolling：touch;
padding：10px;
border：1px solid＃000;
background-colour：#fff;
}
发现是在 p 元素上使用 contenteditable =true，但这有一些垮台： p>
- 我无法允许在元素中创建更多标签
- 键盘显示
我发现的另一个解决方案是删除 pre 格式化。
解决方案
解决这个问题的一个解决方案是把 p 标签中的全部内容，或任何内容，然后分隔通常由< br /> 与一个假线断裂看起来像这样：
< a class =space> ; / a>
它可以是任何正常的内联元素，然后我们将给出以下CSS：
.space {
display：inline-block;
height：15px;
width：100％;
}
I am creating a Phonegap app that requires the user to select text inside a p element, and then "copy" the text which modifies it to me needs.
There is a problem, however, with selecting text inside the p tag. The text is retrieved from my server where it is outputted like so:
<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>
This will alow the text to retain the line breaks without me using <br/> tags, which do not currently work within my Javascript.
Anyways, when you try to select text in this element, the entire p element is selected instead. Here's the transition of what happens when you select a word, then move the bounds to select more text:
NOTE: The text is different in the first sequence because I took the screenshot with different text, but the effect is still the same.
I can't provide a jsFiddle for this as it seems to be only replicated in Phonegap, but I've uploaded my source to test: http://cl.ly/2w0O1d3l3h17
There is no JS in the project, but the HTML and CSS look like this:
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;
}
One potential solution that I've found is to use contenteditable="true" on the p element, but this has some downfalls:
- I can't allow for more tags to be created within the element
- I can't have the keyboard showing
Another solution I've found is to remove the pre formatting. This, however, removes the line breaks, which I would ideally like to keep.
解决方案
A solution to this is to put the entire contents in a p tag, or anything, then separate each paragraph that would normally be separated by a <br /> with a faux-line break that looks something like this:
<a class="space"></a>
It can be any normally inline element, which we will then give the following CSS to:
.space{
display:inline-block;
height:15px;
width:100%;
}
这篇关于iOS Phonegap多行文本选择错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
