Textarea, maybe an other way

S

Simon

I have another question..
Let's take a textarea with the parameter: "rows=4"
(<textarea rows=4 onkeydown="CheckScrollbar()"> )

If you start typing the scrollbar at the right is not active. Only when you
exceed the four lines (rows=4) the scrollbar becomes active.
That moment..the moment the scrollbar becomes active..can javascript
recognize/capture this moment?
Thanks, Simon
 
V

Vjekoslav Begovic

You can do that, try this example (tested on IE6):

<html>
<head>
<script type="text/javascript">
var savedValue="";
function CheckScrollbar(){
var nomoretext=false;
var str = document.getElementById("nomorethanxrows").value;
var lines = str.split("\n");
var allowedLines =
document.getElementById("nomorethanxrows").getAttribute("rows");
var allowedCols =
document.getElementById("nomorethanxrows").getAttribute("cols")
if (lines.length > allowedLines){
nomoretext=true
}
var howmanyrows=0;
for (var i = 0; i<lines.length; i++){
var onelinelength =
(i==lines.length-1)?lines.length:lines.length-1;
if (onelinelength > allowedCols)
howmanyrows += Math.ceil(onelinelength/allowedCols);
else
howmanyrows++;
if (howmanyrows > allowedLines)
nomoretext=true;
}
if (nomoretext){
alert("No more text in my house.");
document.getElementById("nomorethanxrows").value = savedValue;
}
}
function SaveValue(){
savedValue=document.getElementById("nomorethanxrows").value;
}
</script>
</head>

<body>
<textarea id="nomorethanxrows" rows="4" cols="15" onkeypress="SaveValue()"
onkeyup="CheckScrollbar()"></textarea>
</body>
</html>
 
S

Simon

Thanks a lot!!!!!
You are great!
Vjekoslav Begovic said:
You can do that, try this example (tested on IE6):

<html>
<head>
<script type="text/javascript">
var savedValue="";
function CheckScrollbar(){
var nomoretext=false;
var str = document.getElementById("nomorethanxrows").value;
var lines = str.split("\n");
var allowedLines =
document.getElementById("nomorethanxrows").getAttribute("rows");
var allowedCols =
document.getElementById("nomorethanxrows").getAttribute("cols")
if (lines.length > allowedLines){
nomoretext=true
}
var howmanyrows=0;
for (var i = 0; i<lines.length; i++){
var onelinelength =
(i==lines.length-1)?lines.length:lines.length-1;
if (onelinelength > allowedCols)
howmanyrows += Math.ceil(onelinelength/allowedCols);
else
howmanyrows++;
if (howmanyrows > allowedLines)
nomoretext=true;
}
if (nomoretext){
alert("No more text in my house.");
document.getElementById("nomorethanxrows").value = savedValue;
}
}
function SaveValue(){
savedValue=document.getElementById("nomorethanxrows").value;
}
</script>
</head>

<body>
<textarea id="nomorethanxrows" rows="4" cols="15" onkeypress="SaveValue()"
onkeyup="CheckScrollbar()"></textarea>
</body>
</html>



Simon said:
I have another question..
Let's take a textarea with the parameter: "rows=4"
(<textarea rows=4 onkeydown="CheckScrollbar()"> )

If you start typing the scrollbar at the right is not active. Only when you
exceed the four lines (rows=4) the scrollbar becomes active.
That moment..the moment the scrollbar becomes active..can javascript
recognize/capture this moment?
Thanks, Simon
Click to expand...
Click to expand...
 
J

Jawad Shaik Mohammed

AAAAARRRGGGHHHHHHH!!!!!!!!!!!!!!!!

Sorry, but thats how much I was frustrated when I could not get a
simple thing to work on a static html page using javascript. I just
wanted to insert a line break into the textarea dynamically. Here is
the piece of code that will not work... but will give you a "unknown
runtime error". If you remove the "<br>"s, it will work.



<html>
<head>
<script language="JavaScript">
function writeText() {
document.all.myTextArea.innerHTML =
"Hello<br>" + "sometext" + "<br>Hello";
//THIS WONT WORK EITHER:
//document.all.myTextArea.innerHTML =
// "Hello\n" + "sometext" + "\nHello";
}
</script>

</head>
<body>
<table>
<tr><td id="mytd"><textarea
id="myTextArea"></textarea></td></tr>
<tr><td><input type="submit" name="submit" value="submit"
onClick="writeText();"/></td></tr>
</table>

</body>
</html>




But Internet Explorer did not like it. I visited a lot of newsgroups
and tried different things. I've tried replacing line breaks ("\n")
with <br>s and what not... but we wont go into it. What I am trying
to
say here is that I could not find a way to format the text inside a
text area. After hours of research, I just ended up doing something
like this... which by the way occured to me when I was finishing up
my
Dominos pineapple pizza. The workaround was to include the whole
textarea inside the javascript and write them into the TD using the
innerHTML of the TD at runtime. I sincerely hope that this will help
someone solve a similar issue and save them a lot of trouble.

=========
SOLUTION:
=========

Here is the code that I came up with to work around this situation...


//THIS IS THE WORKAROUND: (result is the id of TD, so you are
basically inserting html that CONTAINS the textarea into the TD
instead of writing text to the textarea. i.e., you are writing the
whole textarea into the TD at runtime)

<html>
<head>
<script language="JavaScript">
function writeText() {
var rslt;
rslt = "<textarea id=\"myTextArea\">";
rslt += "Hello\n" + "sometext" + "\nHello";
document.all.mytd.innerHTML = rslt + "</textarea>";
}
</script>

</head>
<body>
<table>
<tr><td id="mytd"> <textarea id="myTextArea"></textarea>
</td></tr>
<tr><td><input type="submit" name="submit" value="submit"
onClick="writeText();"/></td></tr>
</table>

</body>
</html>


GOOD LUCK!!!

You are welcome.

Jawad Shaik Mohammed
Stryker Instruments
Kalamazoo, MI
Ph: (269) 323-7700 x3500
 
Z

Zac Hester

Simon said:
Vjekoslav..
You've been very helpful sending me this script, it workes well but i have a
question.
When I type text in this textarea without hiiting return on my keyboard it's
possible to exceed the limit off lines.
For example a textarea with your code and a maximum of 4 rows:
[textarea]
1111111111111
2222222222222
3333333333333
4444444444444
When I would go on typing (55555555555) i could get to the 5th line without
an alert!
Could you perhaps look into that? It's very important to me that no one can
exceed the limit in lines set by the rows.

Thank you in advance,
Simon
Click to expand...

If you know the number of columns as well as the number of rows, you can
also trap the number of characters from being exceeded. The total possible
number of characters is the product of rows and columns. You can check how
many characters are in a form element like this:

tbox = document.getElementById('sometextbox');
if(tbox.value.length > (rows * cols)) {
tbox.value = tbox.value.slice(0, -1);
alert('I\'m watching you! Stop typing, and read the form
description.');
}

This would work in conjunction with the line break ("\n") checks since that
means the rows are being ended "prematurely" and therefore can not exceed
the total number of characters in your text box.

By the way, if this is "very important," you can't count on JavaScript to
keep people from turning scripting off and pasting a copy of "The Complete
Works of Shakespeare" in your textarea. You should also check the length of
user input in your form handler on the server. If this is only "mildly
important," you can probably trust JavaScript to only goof on you <10% of
the time.

HTH,
Zac
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Textarea wrap=hard, doesn't recognize \n 0
Limit input length in textarea 3
I'm tempted to quit out of frustration 1
character counter 3
show image when done 5
javascript creating an array, that's length is the result of a match 2
Help me pick an API design (OO vs functional) 48
Qooxdoo--garbage? 8

Members online

Total: 45 (members: 4, guests: 41)
Robots: 462

Forum statistics

Threads
473,768
Messages
2,569,575
Members
45,054
Latest member
LucyCarper

Latest Threads

Top