I have a further question about a solution provided elsewhere on this site (HTML textbox, auto highlighting text)
The solution for making auto select text worked, but I can't figure out how to include HTML in the box, without it disappearing. I have used the text on the following page:
http://www.tennessee-scv.org/camp1640/Tour/media/
For example, I need the first box to read:
Germantown Tour
but if I set it up like that, then it it only displays up to the first ("), so I had to use (').
This is what you require!!
<textarea name="textarea" cols="85" rows="10" wrap="VIRTUAL" onclick="this.select();">CODE HERE!!/textarea>
Fiddle Link : http://jsfiddle.net/qNmXr/8/
Updated Fiddle Link. This is the exact thing which works for you. Check it out!
Try using "
<a href="http://www.germantowntour.com" target="_blank">Germantown Tour</a>
W3c reference
Related
I have a sms editor created with textarea, where you can add text and pre defined custom tag like %%voucher?id=1%%.
<textarea dir="ltr">%%voucher?id=1%%</textarea>
My problem is when the text direction is changed , this tag becoms voucher?id=1%%%%. this is messing up the tag structure.
<textarea dir="rtl">%%voucher?id=1%%</textarea>
I tried this in tinyMCE and CKEditor, both have same behaviour when customised to work as sms editor.
Any solution for this?
You can take help of invisible control character to preserve the direction.
<textarea dir="ltr">%%voucher?id=1%%</textarea>
<textarea dir="rtl">%%voucher?id=1%%</textarea>
For conditionally adding , you'll need to parse the textarea value. This will help.
I have updated it. let me make it more clear
<input type="text" value='<div>hello</div><strong>'/>good day
what I have got
input box having default value as <div>hello</div><strong> inside it and the text following the input good day does not inherit the strong tag it looks normal font size and it is not interpreted by browser and this is what i want.
http://jsfiddle.net/UrGpC/3/ This is what i really want to be but does it work in all browsers ?
The browser does not treat the html tags which are inside the input value as the normal flow of html tags from my experiment or does it interpret them ?
You should try and see, it doesn't interpret it as an element, it get rendered as plain text, try loading jQuery and change it thru it:
$('#test').html("ok");
http://jsfiddle.net/nd87/UrGpC/
Next time you should Test it and explain what you have tried
Well you can try this:
<input type="text" value="<div>hello</div><strong>" />
PD: You forgot to close the value atributte :P
EDIT:
It's works for me, is so strange... Anyway if it doesn't work you can try & lt; and & gt; method.
<div>hello</div>
As Wesley Murch said. ;)
I tried to do this recently, but gave up. According to this: http://www.w3.org/TR/html4/interact/forms.html#adef-value-INPUT, input value is CDATA, which seems to mean basically only ordinary characters can be included. http://en.wikipedia.org/wiki/CDATA
I'm doing something rather elementary - doing a <textarea cols="60" rows="35"> textarea scrollable text box.... the problem im getting is html keeps popping up regardless of whether its written in wordpress html or text mode - in text mode on wordpress, when the selected say <br> is selected, it selects all the text, so i cant delete that or it will delete all the text....
It's a bit unclear to me what your problem is exactly. If you posted the problematic html we could use an editor to play around with it and try and help find a solution.
I suspect you aren't "closing" the textarea tag:
<textarea name="thingy" cols=10 rows=5></textarea>
^^^^^^^^^^^
I want to be able to just click inside a text field, so that it highlights all the text inside it (and possibly also copies it). Although, I'm satisfied with just getting it highlighted if that's possible with HTML only. Many people are using NoScript and such nowadays, so I'm trying to stay away from JavaScript etc.
TinyPic is one example which uses this little 'feature'.
Thanks for your help.
I'm pretty sure you need to use some javascript; no matter how trivial it might be.
For example; this does what you're asking:
<input type="text" value="Click Me to Select Text" onclick="this.select()">
in the head section add this script:
<script language="JavaScript">
function highlight(field) {
field.focus();
field.select();}</script>
And then for each field that you want to select all the text in when clicked, add this:
onClick='highlight(this);
I hope it works, try it by the way
If I have a textarea block like so...
<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
.. text area content ...
</textarea>
How can I embed HTML formatted text inside this text block? If I can I had figured the following should work...
<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
<b>Hello how are you today?</b>
</textarea>
As an example. But that sentence does not show up as bold. Maybe I'm just trying to do something that can't be done?
I am pretty sure the answer is no -- cannot do it with a textarea.
From the MDN docs:
The HTML <textarea> element represents a multi-line plain-text editing control.
Permitted content Text
Is not possible with
<textarea>
Use this:
<div contenteditable="true">
</div>
You are correct, it cannot be done.
According to MDN, "character data" is the only permitted content for a <textarea>.
As other answers have described, what you are looking for is a WYSIWYG editor, like CKEditor, TinyMCE, or Kendo's Editor.
This is beside the point, but interestingly, MDN lists some examples on their HTMLTextAreaElement page on how to enable dynamic adding of HTML tags around text in a <textarea> and how to enable autogrow behavior for a <textarea>.
You can do this (convert the "special" characters):
<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
<b>Hello how are you today?</b>
</textarea>
Nope! If you validated that in an HTML document, you'd get an error along the lines of
document type does not allow element "b" here
What you might be looking for is a What-You-See-Is-What-You-Get editor, which is actually an <iframe> which is making use of a JavaScript feature designMode. It's possible to find tutorials on how to create these (archive), but it's a much, much better idea to use an existing one, as for it to be really useful and usable takes a lot of work.
Take note that - if you were still interested in validation, which you should be if you're working with HTML - is that you won't be able to use a strict DOCTYPE declaration, as the WYSIWYG editor will be using an iframe.
You can try this too its simple and if you are using asp.net use lable contron in text area add this as
Text="< stonename >"
"<";stonename">";
You can not do that inside textarea but what you can do...you can use p tag and parse information to tag by JQuery. Something like this:
var stringviewinfo ="aaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaa<b>aaaaaaaa</b>aaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaa<font color=\"red\">AAAA</font>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<b>aaaaaaaaaaaaa<b>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
$('#viewinfo').html(stringviewinfo);
<p style="word-wrap: break-word;" id="viewinfo"></p>
I hope this will help.
By now (8 years later) you know textarea is not the way to go.
If you happen to be using Vue.js, you can use a div with v-html to set the inner HTML
<template>
<div name="myTextArea" cols="100" rows="20" readonly=readonly v-html="content" />
</template>
<script>
export default {
data() {
return{
content = "<b>Hello how are you today?</b>";
}
}
</script>
Here is the answer.
Use this function.
function br2nl(varTest) {
return varTest.replace(/<br\s*\/?>/ig, "\r");
}
There is a very simple way you can achieve that.
First: Customize the <textarea> to accept and save special chars to DB
<textarea contenteditable="true" class="form-control" name="setting[header_code]"><?php echo set_value('setting[header_code]', html_entity_decode($item->header_code)) ?></textarea>
Second: extract and echo the saved data from DB
<?php echo html_entity_decode(config(nl2br('header_code')));?>
Hope it can help you.
Thanks