Wrapping single words in textarea
Hi guys,
someone asked here about making textarea in FF wrap text like IE does it. For example, if I enter smth like this asdasdasdasdasdasdasdas in FF textarea will just scroll to the right whereas IE wraps the text once it reaches the end of the line. So, I'm writing a script that will simulate IE textarea behavior in FF.
Here it is:
<html>
<head>
<script language="JavaScript">
var limit = 7; // set to whatever you want the limit to be
var main = "";
var count = 0;
var check = 0;
function wrapIt(obj) {
main = obj.value;
count = main.length;
count -= check;
if(count == limit) {
obj.value = main + "\n";
check += (limit + 1);
}
}
</script>
</head>
<body>
<textarea cols="10" rows="2" onKeyDown="wrapIt(this)"><
</body>
</html>
It does work and allows only 7 symbols on each line. But if I delete text after entering it, it scrolls to the right again. Any suggestions on how to improve?
someone asked here about making textarea in FF wrap text like IE does it. For example, if I enter smth like this asdasdasdasdasdasdasdas in FF textarea will just scroll to the right whereas IE wraps the text once it reaches the end of the line. So, I'm writing a script that will simulate IE textarea behavior in FF.
Here it is:
<html>
<head>
<script language="JavaScript">
var limit = 7; // set to whatever you want the limit to be
var main = "";
var count = 0;
var check = 0;
function wrapIt(obj) {
main = obj.value;
count = main.length;
count -= check;
if(count == limit) {
obj.value = main + "\n";
check += (limit + 1);
}
}
</script>
</head>
<body>
<textarea cols="10" rows="2" onKeyDown="wrapIt(this)"><
</body>
</html>
It does work and allows only 7 symbols on each line. But if I delete text after entering it, it scrolls to the right again. Any suggestions on how to improve?
I don't have firefox on this machine, but the wrap="virtual" property on the textarea doesn't do the trick?
ASKER
nope, it doesn't
How about this?:
<html>
<body>
<textarea cols="10" rows="2" style="word-wrap:break-wor
</body>
</html>
-Mark
<html>
<body>
<textarea cols="10" rows="2" style="word-wrap:break-wor
</body>
</html>
-Mark
ASKER
No, it doesn't work. I've tried many other things already. It wraps normal sentences, no problem. But it doesn't wrap smth like ssssssssssssssssssssssssss
Bah. Forget it. I read your question wrong. :(
Hi,
try this below example...use wrap=physical;
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
countfield.value = maxlimit - field.value.length;
}
// End -->
</script>
</HEAD>
<BODY>
<center>
<form name=myform action="YOUR-SCRIPT.CGI">
<font size="1" face="arial, helvetica, sans-serif"> ( You may enter up to 125 characters. )<br>
<textarea name=message wrap=physical cols=28 rows=4 onKeyDown="textCounter(thi
<br>
<input readonly type=text name=remLen size=3 maxlength=3 value="125"> characters left</font>
</form>
</center>
R.K
try this below example...use wrap=physical;
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
countfield.value = maxlimit - field.value.length;
}
// End -->
</script>
</HEAD>
<BODY>
<center>
<form name=myform action="YOUR-SCRIPT.CGI">
<font size="1" face="arial, helvetica, sans-serif"> ( You may enter up to 125 characters. )<br>
<textarea name=message wrap=physical cols=28 rows=4 onKeyDown="textCounter(thi
<br>
<input readonly type=text name=remLen size=3 maxlength=3 value="125"> characters left</font>
</form>
</center>
R.K
ASKER
rama_krishna580, thanks, but it's not what I want. Look at this picture. I don't think you guys understand what I'm trying to achieve here.
http://i59.photobucket.com/albums/g283/RealSnaD/untitled.jpg
I don't want it to scroll to the right.
http://i59.photobucket.com/albums/g283/RealSnaD/untitled.jpg
I don't want it to scroll to the right.
Hi,
>>>> I don't want it to scroll to the right.
The above example when u try is it scrolling to right..? it will not it wraps automatically.. try it and let me know..
R.K
>>>> I don't want it to scroll to the right.
The above example when u try is it scrolling to right..? it will not it wraps automatically.. try it and let me know..
R.K
ASKER
I did try it. That's a snapshot of that example. It doesn't wrap. Try it yourself. Load the page, and hold "a" for 5 seconds in textarea. See what happens.
People: It is the counter that does not update when backspace or delete is hit.
I would consider using setInterval onFocus and clearInterval onBlur to run the counter while the user is in the field
Michel
I would consider using setInterval onFocus and clearInterval onBlur to run the counter while the user is in the field
Michel
ASKER
They all scroll to the right.
About counters too... when you eventually work out that you need to count how many chars per col and then insert \n, IE counts \n as 1 char and FF as 2... when you get to that stage that is.
Use both onKeyPress and onKeyDown. I tried and it works:
<html>
<head>
<title>Script Demo Gops</title>
<head>
<script type="text/javascript">
var limit = 7; // set to whatever you want the limit to be
var main = "";
var count = 0;
var check = 0;
function wrapIt(obj) {
main = obj.value;
count = main.length;
count -= check;
if(count == limit) {
obj.value = main + "\n";
check += (limit + 1);
}
}
</script>
</head>
<body>
<textarea cols="10" rows="2" onKeyPress="wrapIt(this)" onKeyDown="wrapIt(this)"><
</body>
</html>
<html>
<head>
<title>Script Demo Gops</title>
<head>
<script type="text/javascript">
var limit = 7; // set to whatever you want the limit to be
var main = "";
var count = 0;
var check = 0;
function wrapIt(obj) {
main = obj.value;
count = main.length;
count -= check;
if(count == limit) {
obj.value = main + "\n";
check += (limit + 1);
}
}
</script>
</head>
<body>
<textarea cols="10" rows="2" onKeyPress="wrapIt(this)" onKeyDown="wrapIt(this)"><
</body>
</html>
ASKER
I know it works, but if you type in something and then delete everything or part of it, it doesn't wrap anymore. The count variable doesn't get updated or gets updated wrong. I don't know yet.
<html>
<head>
<title>demo</title>
<head>
<script type="text/javascript">
function upCounter(obj){
var input = document.getElementById('c
var str = obj.value;
var count = str.length;
//alert(count);
input.value = count;
}
</script>
<style type="text/css" media="screen">
textarea{overflow-x:hidden
</style>
</head>
<body>
<textarea onkeyup="upCounter(this)" onKeyPress="upCounter(this
<input id =counter type=text ><input>
</body>
</html>
Ups forgot to give some explanation:
- to autowrap use CSS with overflow propreties.
- to update corretly use onkeyup
Let me know
S_D
ASKER
I tried your example. Now the textarea doesn't scroll to the right but it doesn't wrap either :)
Sorry forgot it...
<html>
<head>
<title>demo</title>
<head>
<script type="text/javascript">
var limit = 7; // set to whatever you want the limit to be
var main = "";
var count = 0;
var check = 0;
function upCounter(obj){
var input = document.getElementById('c
var str = obj.value;
var count = str.length;
var count2 = count - check;
if(count2 == limit) {
obj.value = str + "\n";
check += (limit + 1);
}
input.value = count;
}
</script>
<style type="text/css" media="screen">
textarea{overflow-x:hidden
</style>
</head>
<body>
<textarea onkeyup="upCounter(this)" onKeyPress="upCounter(this
<input id =counter type=text ><input>
</body>
</html>
<html>
<head>
<title>demo</title>
<head>
<script type="text/javascript">
var limit = 7; // set to whatever you want the limit to be
var main = "";
var count = 0;
var check = 0;
function upCounter(obj){
var input = document.getElementById('c
var str = obj.value;
var count = str.length;
var count2 = count - check;
if(count2 == limit) {
obj.value = str + "\n";
check += (limit + 1);
}
input.value = count;
}
</script>
<style type="text/css" media="screen">
textarea{overflow-x:hidden
</style>
</head>
<body>
<textarea onkeyup="upCounter(this)" onKeyPress="upCounter(this
<input id =counter type=text ><input>
</body>
</html>
ASKER
It does the same thing. Wraps text fine. If I type in and delete afterwards, no wrapping anymore.
Almost, but gotta go
<script>
var maxChars=7;
var fld = null;
var tId="";
function splitIt() {
if (!fld) return;
var val = fld.value
var newVal = "";
var len = val.length
while (len>=maxChars) {
newVal +='\n'+val.substring(0,max
val = val.substring(maxChars)
len = val.length
}
newVal += val;
if (newVal.length>maxChars) newVal=newVal.substring(1)
document.getElementById('x
}
</script>
<form>
<textarea onFocus="fld = this;tId=setInterval('spli
</form>
<div id="x"></div>
<script>
var maxChars=7;
var fld = null;
var tId="";
function splitIt() {
if (!fld) return;
var val = fld.value
var newVal = "";
var len = val.length
while (len>=maxChars) {
newVal +='\n'+val.substring(0,max
val = val.substring(maxChars)
len = val.length
}
newVal += val;
if (newVal.length>maxChars) newVal=newVal.substring(1)
document.getElementById('x
}
</script>
<form>
<textarea onFocus="fld = this;tId=setInterval('spli
</form>
<div id="x"></div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Now it's working. Thanks.
ASKER
mplungjan, your solution is pretty cool, but it's not excatly what I needed.
your welcome :D
I did not have time to finish. I just needed to copy the content of the div back onblur