Solved

Newline or Linebreak for Pasted Text in IE with Javascript

Posted on 2010-09-03
8
1,147 Views
Last Modified: 2012-05-10
I have a JavasScript script that pastes a snippet of code or text with line breaks (/n/r) to a PRE, DIV, or TEXTAREA tag. The purpose is for the user to copy and paste the content to a text file.

When copying and pasting the snippet in FF, the pasted text properly has line breaks. When pasting the text from IE, all the text shows on one line.

How can I ensure that line breaks are not ignored when copying from IE and pasting in a text file?

See DevShed thread for further discussion.
0
Comment
Question by:strimp101
  • 2
  • 2
  • 2
  • +2
8 Comments
 
LVL 51

Expert Comment

by:HainKurt
ID: 33601749
i cannot get the issue...

when you browse the code below, and copy paste it to notepad, i see it properly, also when i paste into text area it pastes properly...
<textarea cols=80 rows=20>
<pre>
Tags: 
internet explorer, carriage return, line break, copy, paste Add Tags    Add Tags
Zones: 
JavaScript, Miscellaneous Web Development, Hypertext Markup Language (HTML)
Author: 
strimp101, Premium Service Member
 Posted: 
03/09/10 09:26 PM
 Time Zone: 
Pacific Daylight Time (GMT-07:00)
</pre>
</textarea>

Open in new window

0
 
LVL 1

Expert Comment

by:coldfusionwebdev
ID: 33601769
You can detect for IE and then use  '\r' instead of '\r\n'
0
 
LVL 14

Expert Comment

by:sam2912
ID: 33601779
You may need to convert newline characters (/n), (/r), or (/n/r) into copyable HTML tags like <br /> or <p>.


<script type="text/javascript">
var string = "this\ris\ra\rtest";
string = string.replace(/(\n\r|\n|\r)/g, "<br>");
document.write(string);
</script>

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:strimp101
ID: 33601780
Using \r instead of \r\n does not solve the problem.

Take the following code

var txt = 'this is some text' + "\r\n";
txt = txt + 'this is additional text';

document.getElementById('somePreTag').appendChild(document.createTextNode(txt))

The PRE tag will contain:

this is some text
this is additional text

But if you copy and paste the text into Notepad for example, it will be

this is some textthis is additional text

I am creating snippets of text and code programmatically then assigning that text to the PRE tag.

http://forums.devshed.com/javascript-development-115/newline-or-linebreak-for-pasted-text-735111.html
0
 

Author Comment

by:strimp101
ID: 33601782
I have also tried converting the \n\r into <br> tags. This does not work either.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33601803
What happen if you set textarea wrap attribute to hard ?

HTML 5 : http://www.w3schools.com/html5/tag_textarea.asp
<textarea wrap="hard"

Open in new window

0
 
LVL 51

Accepted Solution

by:
HainKurt earned 500 total points
ID: 33601804
this is working fine for me, IE8

copy paste the text into a notepad and see
<pre id=somePreTag>
</pre>

<script>
var txt = 'this is some text' + "\r\n";
txt = txt + 'this is additional text';

document.getElementById('somePreTag').appendChild(document.createTextNode(txt))
document.getElementById('somePreTag').appendChild(document.createTextNode(txt))
document.getElementById('somePreTag').appendChild(document.createTextNode(txt))
document.getElementById('somePreTag').appendChild(document.createTextNode(txt))
</script>

Open in new window

0
 
LVL 1

Expert Comment

by:coldfusionwebdev
ID: 33601851
On second though, this might be impossible to implement for IE 7.  
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Problem to refer to value 8 50
URGENT - Wordpress site missing  theme 9 41
Connection to multiple databases 13 20
filter portfolio grid display on page load (wordpress) 7 19
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question