change direction inside a text area

[lofaifa]

i have a textarea and two buttons .. my goal is when a user clicks a button the writing direction change (to rtl) , and when he clicks the other button he go back to normal direction ltr , the problem is i cant apply html tags inside a textarea cuz everything is considered a text !

 

 

any idea on how to do it ?

[AyKay47]

Use JS events to change the CSS direction: property of the <texarea>.

[lofaifa]

if i did that , the whole text inside the text area will change direction .. and i dont want that (tried it)

 

what i want is if ur writing ltr (as default) normaly ,  and u want to write some code , it will be ugly to switch all of the provious text to rtl , soo what i want is that the previous text remains in the same direction and when u click the button ur actual direction change not the previous one , its like i wanna open a div inside the textarea with the direction u want and i put u inside it until u finished and u click back and u get out of the tag , soo that u still can see texts in different directions as u want inside ur textarea before u submit .

 

<textarea dir="rtl">
normal text
<div dir="ltr">
text with diferrent direction 
</div>
</textarea>

[seanlim]

i highly doubt that is possible with a normal textarea, as it is meant for plain, unformatted text.

 

what you want is almost like a wysiwyg editor. You could try an editable <div> instead of a textarea and append a inner <span> to reverse the text direction.

[lofaifa]

and if i want to send the data inside <div> via form .. it wont work

[seanlim]

i'm pretty sure contentEditable objects are not sent together with the other form elements when the form is submitted.

 

what you'll need to do is to use javascript to "copy" the contents of the contentEditable element, and add it into the form request e.g. by "pasting" into a hidden input element.

 

So the entire process is:

[*]User enters data into the div and clicks submit

[*]Javascript copies data from the div

[*]Pastes it into the a hidden input

[*]Continue with form submission

[lofaifa]

nice man .. ill try this new stuff u said and ill let u know the result later

 

thanks everyone for ur help !

[lofaifa]

there is a problem , i want to detect all html in my div tag

 

when i was working with textarea tag i used this :

 

var string=$(this).attr('value');

 

and its not working .. also this :

 

var string=$(this).text();

 

doesnt display html just text

 

and those :

 

string=document.getElementById('question_text').innerHTML;

string=$(this).html();

 

gives me back when the div is empty (or when i jump a line) :

 

<div><br></div> (empty text)

 

<div><br></div><div><br></div> (jumped a line whith nothing in first line)

 

<div> tags is appearing everywhere 

[lofaifa]

i solved the other problem but im now in another html one .. when i insert the new span tag inside the original div tag it get the same direction and float of div (when im changing span attributes to rtl)

 

 

<div id="question_text" class="question" contenteditable="true">
<span id="spon">test</span>
</div>

 

#question_text{
direction:rtl; 
text-align:right; 
}

#question_text span{
direction:ltr; 
text-align:left; 
}