/    Sign up×
Community /Pin to ProfileBookmark

Textarea Row-Page Transition

Copy linkTweet thisAlerts:
Jul 16.2006

I’m fairly certain that this is a JavaScript issue so I’m presenting it to you guys.

I have a multi-row text box that has a set height and width. What I want to do is make it so that once the text that is typed in hits a certain row it will automatically clear the lines above it and present the user with a new text box. The new one doesn’t have to be new, per say, but it does have to be blank. I was thinking that a script could be written to post the text from the text box to an external text file, or it can utilize XML, and when they user hits the ‘Next’ and ‘Previous’ buttons, it will only display the text in incriments of the number of rows that the text box is allowed to display.

Any ideas on how I can pursue this? I’m not necessarily looking for the code written out for me, I would just at least like some guidance on where to go with it. Any thoughts?

Thanks,
-Walman

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@konithomimoJul 16.2006 — Instead of using text files, which JS does not do well, since it cannot read from them, I suggest just creating textareas dynamically and then changing their display values (ithat is if you don't want to use any server side languages). Here is a quick bit of code that I wrote to start you off:
<html>
<head>
<script type="text/javascript">
function showMe(num)
{
var t = document.getElementsByTagName('textarea');
var l = t.length;
for(var i=0;i<t.length;i++)
{
if(t[i].style.display=='block')
{

if(((num==-1)&&(i==0))||(num==2))
{
t[l-1].style.display='block';
t[i].style.display='none';
return true;
}

else if (num==-1)
{
t[i-1].style.display='block';
t[i].style.display='none';
return true;
}

else if(((num==1)&&(i==(l-1)))||(num==0))
{
t[0].style.display='block';
t[i].style.display='none';
return true;
}

else
{
t[i+1].style.display='block';
t[i].style.display='none';
return true;
}
}
}
return true;
}

function fullCheck(t){
var i = t.id;
var texts = document.getElementsByTagName('textarea');
var num = texts.length;

if(t.value.length == (t.rows*(t.cols-1)))
{

if(num>1)
return true;

var text = document.createElement('textarea');
text.setAttribute('rows', '5');
text.setAttribute('cols', '25');
text.setAttribute('id', 'text'+num);
document.getElementById('mydiv').appendChild(text);
overf('text'+num,t);
text.focus();
}
return true;
}

function overf(obj,t)
{
var tt = document.getElementById(obj);
tt.style.overflow='hidden';
tt.style.display='block';
tt.setAttribute('onkeydown',function(){fullCheck(this)});
//t.setAttribute('disabled',true);
t.style.display = 'none';
return true;
}
</script>
</head>
<body>
<form>
<div id="mydiv">
<textarea rows=5 cols=25 id="text0" onkeydown="fullCheck(this)" style="overflow:hidden">
</textarea>
</div>
<input type="button" value="First" onclick="showMe(0)">
<input type="button" value="Previous" onclick="showMe(-1)">
<input type="button" value="Next" onclick="showMe(1)">
<input type="button" value="Last" onclick="showMe(2)">
</form>
</body>
</html>

You can change whatever you need to make it work for you. There is a slight bug with the first and last button if you are already on the respective textareas, but that isn't too big of a deal to fix. As well, you can make it so that if you start deleting text from one textarea that the text from the next text area will move into the one you are deleting from.
Copy linkTweet thisAlerts:
@konithomimoJul 16.2006 — The other thing that you can do is use an onkey event to put the value of the textarea into another text field and then just apply those changes to the other text field and have them shown in the textarea.
×

Success!

Help @walman05 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...