Jump to content

New Line In <textarea> In Ie7


skaterdav85

Recommended Posts

ya I just tried that and it didnt work. It did work in Chrome though. I havent tried FF or Safari. I just need it to work in IE7 though =/I just tried using this

& # 1 3;

(remove the spaces. It wouldnt show on the forum. apparently it works when i am trying to post here, but i am using chrome.) based on this link http://scottmoniz.com/programmingBlog/2009...nto-a-textarea/ and that doesnt work either!

Link to comment
Share on other sites

I just tried using & # 1 3; in a textarea and it works in IE7. But I am actually using some JavaScript to take the current value of the textarea, append 2 line breaks, add the new text, and then set the text area to that new value. (see my JS code below). It works fine in chrome and FF, but not in IE7. Any idea why?

firstValue = document.getElementById('skillsTextArea').innerHTML;firstValue = firstValue + '& # 1 3; & # 1 3;';firstValue = firstValue + skill;document.getElementById('skillsTextArea').innerHTML = firstValue;

of course, there wouldnt be spaced in the & # 1 3; in my code.

Link to comment
Share on other sites

That link is a little confused. When you create a textarea as HTML, you must insert linebreaks as actual linebreaks:

<textarea>Helloworld</textarea>

No special code needed. Just hit the return key, and the formatting is preserved, along with spaces and tabs.But if you want to assign the value as a string in JavaScript, then you need the newline char:

var s="Hello\nworld";document.getElementById("txt").value = s;

Does this really not work?

Link to comment
Share on other sites

Well I don't want to hardcode a special char in my textarea. I have a list of keywords. When a keyword is clicked, that text is put into the textarea. But i want the text to be on a new line in my textarea, and the only way to do that would be to append a newline character to the text i clicked. However, IE7 doesn't recognize

\n, <br>, or & # 1 3;

, so I don't know how to pull off this effect.

Link to comment
Share on other sites

So this is my textarea:

<textarea id="skillsTextArea" cols="35" rows="10"></textarea>

and here is my JS. Look at this line. firstValue = firstValue + '& # 1 3;';

function addSkill(skill,id) {		skill = skill.replace(/ /g,'');		skill = trim(skill);		firstValue = document.getElementById('skillsTextArea').innerHTML;		firstValue = firstValue + '& # 1 3;';	  		firstValue = firstValue + skill;		document.getElementById('skillsTextArea').innerHTML = firstValue;}

Link to comment
Share on other sites

So this is my textarea:
<textarea id="skillsTextArea" cols="35" rows="10"></textarea>

and here is my JS. Look at this line. firstValue = firstValue + '& # 1 3;';

function addSkill(skill,id) {		skill = skill.replace(/ /g,'');		skill = trim(skill);		firstValue = document.getElementById('skillsTextArea').innerHTML;		firstValue = firstValue + '& # 1 3;';	  		firstValue = firstValue + skill;		document.getElementById('skillsTextArea').innerHTML = firstValue;}

I have a slight suspicion that Internet Explorer is treating firstValue as a pointer rather than a string.See if this works better:
		skill = skill.replace(/ /g,'');		skill = trim(skill);		firstValue = '\n' + skill;		document.getElementById('skillsTextArea').innerHTML += firstValue;

Link to comment
Share on other sites

I just tried your re-work and it doesn't work in IE. I simplified my code a bit so its more clear:

<script language="javascript">function addSkill(skill) {		firstValue = '\n\n' + skill; 		firstValue = '
' + skill; //this didn't work either		document.getElementById('skillsTextArea').innerHTML += firstValue;}</script><textarea name="skillsTextArea" id="skillsTextArea" cols="35" rows="10"></textarea><span onclick="addSkill(this.innerHTML);">hello</span>

What in the world is IE doing? :)

Link to comment
Share on other sites

Modify the textarea's value property, not the innerHTML. It is not intuitive that this should be the way, and it looks like Firefox now "supports" the error (unless it's a change to HTML5 also -- I'll check), but a textarea is originally a form control, so the content is still in the value. The fact that the value in this case comes between the tags should not worry you.

Link to comment
Share on other sites

EDITED:FWIW, I can find no explicit references in the HTML5 spec to a textarea's innerHTML.But I did read that the hard-coded text between the textarea tags is to be understood as the element's defaultValue. This makes sense, since the tag itself supports no value attribute.(If you don't know, any hardcoded value of a form element is automatically assigned to its defaultValue property. This value is always available, even after the user has edited the control. I presume the intent is so the original can be restored if need be. I suppose it's also used by reset.)So I tried editing the innerHTML and alerting the defaultValue.In FF, Safari, and Opera, changing innerHTML changes value AND defaultValue.In IE7, it does not change defaultValue. And as we have seen, setting innerHTML to something like "hello\nworld" causes IE7 to treat the newline like whitespace, not like a true newline.Something worth knowing.

Link to comment
Share on other sites

Modify the textarea's value property, not the innerHTML. It is not intuitive that this should be the way, and it looks like Firefox now "supports" the error (unless it's a change to HTML5 also -- I'll check), but a textarea is originally a form control, so the content is still in the value. The fact that the value in this case comes between the tags should not worry you.
What do you mean FF now supports the error? Did you mean that accessing a textarea's content through innerHTML is invalid JS?
Link to comment
Share on other sites

I'm not talking about accessing. Accessing should always be permitted. I'm only talking about changing the element's value by changing the innerHTML property. It does more than you might think.In most browsers, changing the element's innerHTML also changes its defaultValue property. So here you have one thing -- innerHTML -- that changes two other properties. In principle, that's not always a wrong thing. If you change the selected index of a select element, you also change its value. You change the selected property of the selected option, and also of the option that got unselected. But these properties are obviously associated. Even the way they are named reinforces the association.But this is not the case with a textarea. The association between innerHTML and the defaultValue property might take developers by surprise, especially since a lot of developers don't even know it exists. So let's talk about the defaultValue property itself. When you want to restore a textarea to its original, hard-coded value, the defaultValue property is what you want. It preserves the original value so your code can do a reset. If you've changed it accidentally by changing the innerHTML, then it's gone. You can't restore that element's text by itself, and if you have a reset button, it resets the textarea to the new value, not the old one.I don't like code with hidden side effects.If changing the defaultValue is what you want, then I suggest changing the defaultValue property directly. Then your code does what it says it's going to do.It's just easy to change a textarea by changing it's value property. It doesn't mess with any other properties, and it works consistently in all browsers. And the technique is exactly the same technique you'd use for changing an input type="text".Maybe I'm wrong to say that Firefox supports an error. If changing the innerHTML didn't work this way, that would be even stranger. And it's probably the fastest way to populate textareas you create dynamically. So maybe the moral here, like anywhere else, is just to know the all implications of what the code does.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...