Hi... got a problem with this snippet...
function writeColum () {
var x = document.getElementById("wc").value;
var y = document.getElementById("title").value;
if (event.keyCode == 32) {
x=x+" ";
}
if (event.keyCode == 13) {
x=x+"<br />";
}
document.getElementById("passValue").innerHTML=x;
}Any reasons why it's not working?
Infame,
How is the function called/attached?
Airshow
It's called by OnKeyUp.
<textarea name="xx" id="wc" onkeyup="writeColum();"> </textarea>
preview:
<p id="passValue"></p>
The writing shows succesfully, but when I try one of the events, it does not work that well..
Infame,
The HTML event interface doesn't give access to the event itself. You have to attach the listener in javascript giving something like this :
<textarea name="xx" id="wc"></textarea>onload = function() {
var wc = document.getElementById('wc');
var title = document.getElementById("title");
var passValue = document.getElementById("passValue");
var passValue2 = document.getElementById("passValue2");
wc.onkeyup = function(e) {
e = e || window.event;//cross browser access to the event object
var x = this.value;
var y = title.value;
switch(e.keyCode) {
case 32: x = x + " "; break;
case 13: x = x + "<br />"; break;
//other cases here as required
}
passValue.innerHTML = x;
};
};But you will find that that approach doesn't work for another reason - namely that on each keyup, only the just-entered character is converted - any line feed or space other than the one just entered is not converted on subsequent occasions.
The problem is partialy overcome like this :
onload = function() {
var wc = document.getElementById('wc');
var title = document.getElementById("title");
var passValue = document.getElementById("passValue");
var passValue2 = document.getElementById("passValue2");
wc.onkeyup = function(e) {
e = e || window.event;//cross browser access to the event object
var x = this.value;
var y = title.value;
switch(e.keyCode) {
case 32: x = " "; break;
case 13: x = "<br />"; break;
//other cases here as required
default: x = String.fromCharCode(e.keyCode);
}
passValue.innerHTML += x;
};
};But try inserting or deleting a character.
It's much easier on each keyup to pass the entire string through regular expression(s) to convert all spaces and all line feeds to their HTML equivalents. There's no need to read e.keyCode, hence no need to access the event.
onload = function() {
var wc = document.getElementById('wc');
var title = document.getElementById("title");
var passValue = document.getElementById("passValue");
wc.onkeyup = function(){
var x = this.value.replace(/ /g, ' ').replace(/\n/g,'<br/>');
var y = title.value;
passValue.innerHTML = x;
};
};This converts all spaces and line feeds and automatically handles character insertions and deletions.
Airshow
Whoa! Thanks Airshow, I'll look into it tomorrow morning!
Edit: Just had to test it out, even though it's freaking late!
The last code block that you provided worked perfectly. The others had a few problemes...
Anyways, Thank you! Javascript is pretty much unkown to me... need to read up more on it ;p.
Have a good night! :D
Hi. I was wondering about something. The code is great for writing in ordinary text. But when using <pre class="brush: js;"> code here </pre> it kinda messes it up, since all the original newlines has been converted into the HTML eqvivalent \n- <br />...
Is there a work around for this?
Not too sure ....
It may be a !doctype or browser thing. I tested with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, which interpreted <br /> correctly in IE and FF.
Airshow
Hi. I was wondering about something. The code is great for writing in ordinary text. But when using <pre class="brush: js;"> code here </pre> it kinda messes it up, since all the original newlines has been converted into the HTML eqvivalent \n- <br />...
Is there a work around for this?
Yes.
When using the <pre> tag, you need to bypass the conversion script altogether.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.