I am creating a Phonegap app that requires the user to select text inside a \[code\]p\[/code\] element, and then "copy" the text which modifies it to me needs.There is a problem, however, with selecting text inside the \[code\]p\[/code\] tag. The text is retrieved from my server where it is outputted like so:\[code\]<p style="white-space
re-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>\[/code\]This will alow the text to retain the line breaks without me using \[code\]<br/>\[/code\] tags, which do not currently work within my Javascript.Anyways, when you try to select text in this element, the entire \[code\]p\[/code\] 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/2w0O1d3l3h17There is no JS in the project, but the HTML and CSS look like this:HTML:\[code\]<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="http://stackoverflow.com/questions/15488751/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="http://stackoverflow.com/questions/15488751/cordova-2.5.0.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/15488751/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
re-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>\[/code\]This will alow the text to retain the line breaks without me using \[code\]<br/>\[/code\] tags, which do not currently work within my Javascript.Anyways, when you try to select text in this element, the entire \[code\]p\[/code\] element is selected instead. Here's the transition of what happens when you select a word, then move the bounds to select more text: