For my Phonegap app, I need users to be able to select and modify text inside a p element.
The issue arises when trying to select text within the p tag. The text is fetched from my server and displayed as follows:
<p style="white-space:pre-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget laoreet magna. Quisque eu urna nec turpis imperdiet ultricies. Fusce vel libero id justo fringilla tincidunt. Nullam egestas nisi justo, et dapibus odio tempor eget. Mauris convallis orci at mi volutpat placerat. Nullam scelerisque fermentum efficitur.
</p>
This format allows line breaks without using <br/> tags, which do not function properly in my JavaScript code.
However, when attempting to select text in this element, the entire p element is selected instead of specific words. This creates confusion for users as shown below:
Please note: The text differs in the images due to different content, but the selection issue remains consistent.
I cannot provide a live example on jsFiddle as the problem only occurs within the Phonegap environment. You can access the source files for testing here: Source Files
The project does not contain any JavaScript, and the HTML and CSS structures are as follows:
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
...
</head>
<body>
<p class="text">Sample Text Here...</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 solution I considered was using contenteditable="true" on the p element, but it has limitations such as:
- Restriction on creating additional tags within the element
- Inability to display the keyboard
Another approach I explored was removing the pre formatting. However, this removes line breaks that I prefer to retain.