Guidance Needed

[niche]

I have an input box that's 200px long in a php form. There's no room in the form, to make the input box bigger. Long input in difficult to edit in this small box so I use a word processor to edit long input when I need to.Is there some way to use JS (or some other approach) to trigger a pop-up that's large enough for easier editing that might even include a spell checker?If so, how should I begin to think about making this improvement?

[brucemand]

I have an input box that's 200px long in a php form. There's no room in the form, to make the input box bigger. Long input in difficult to edit in this small box so I use a word processor to edit long input when I need to.Is there some way to use JS (or some other approach) to trigger a pop-up that's large enough for easier editing that might even include a spell checker?If so, how should I begin to think about making this improvement?

would a <textarea> not work for you ?and, IMO, spell-checkers are for wusses !

[ShadowMage]

Is there some way to use JS (or some other approach) to trigger a pop-up that's large enough for easier editing that might even include a spell checker?If so, how should I begin to think about making this improvement?

Absolutely. With JavaScript, there's a way to do just about anything. :)Anyway, you'll probably want to have a hidden div containing a textarea and a button. This div would be shown using the onfocus event of the text input or the onclick event of a button next to the text input.When you show the div, you'd read out the value of the text input and use that to populate the textarea. When done editing, click the button in the div (or you could capture a press of the enter key) which would trigger a function that reads the value of the textarea and places that back into the input, then hides the div.

[brucemand]

Absolutely. With JavaScript, there's a way to do just about anything. :)Anyway, you'll probably want to have a hidden div containing a textarea and a button. This div would be shown using the onfocus event of the text input or the onclick event of a button next to the text input.When you show the div, you'd read out the value of the text input and use that to populate the textarea. When done editing, click the button in the div (or you could capture a press of the enter key) which would trigger a function that reads the value of the textarea and places that back into the input, then hides the div.

this is exactly what i'm working on too !but i'm a bit stuck in trying to put the edited value back into the original element.what i have so far;

function updater(id_clicked) {	var para2chg=document.getElementById(id_clicked);	var edited=document.getElementById('editor').value;					// 'editor' is the <textarea> element you've mentioned above	para2chg.value=edited;	// can it be this simple ?	// is NOT updating the element on the page - also, a reload is *not* needed, right ?// alert(para2chg);		= [object HTMLDivElement]hidetxtarea();}

do i have to iterate through each element contained in "para2chg" and update that DOM Object for each contained element?(i would've tried to do a 'lazy attempt' with foreach() at the time but this is JS not PHP )

[ShadowMage]

If para2chg is anything but a form input, it does not have a value attribute. Try using the innerHTML attribute instead.

[thescientist]

(i would've tried to do a 'lazy attempt' with foreach() at the time but this is JS not PHP )

there is for in

var array = ["zero","one","two","three"];for(var idx in array){  console.log(array[idx]);  //prints zero, then one, then two, then three};

[brucemand]

If para2chg is anything but a form input, it does not have a value attribute. Try using the innerHTML attribute instead.

BINGO - *thanks* !!i now have my very own simple "live HTML editor" !! NICE!!

there is for in

var array = ["zero","one","two","three"];for(var idx in array){  console.log(array[idx]);  //prints zero, then one, then two, then three};

okay thanks, good to know !looks like i'm now encountering stuff not taught on the W3Schools' tutorials.guess i've explored much of the "inner city limits of Kansas"

[ShadowMage]

there is for in

There's also for each ...in and the forEach method of array objects.for...in - https://developer.mozilla.org/en/JavaScript...ements/for...infor each...in - https://developer.mozilla.org/en/JavaScript...s/for_each...inArray.forEach - https://developer.mozilla.org/en/JavaScript...s/array/foreach

[brucemand]

There's also for each ...in and the forEach method of array objects.for...in - https://developer.mozilla.org/en/JavaScript...ements/for...infor each...in - https://developer.mozilla.org/en/JavaScript...s/for_each...inArray.forEach - https://developer.mozilla.org/en/JavaScript...s/array/foreach

oh my, oh my - the big boys toys !!an array-specific method !no wonder OOP is such a quantum leap.