Textareas are great because of some built in functionality (scrollbars). How can I format <spans> of text inside of the <textarea>?
If you need to customize your textarea, reproduce its behavior using another element (like a DIV) with the contenteditable attribute.
It's more customizable, and a more modern approach, textarea is just for plain text content, not for rich content.
<div id="fake_textarea" contenteditable></div>
The scrollbars can be reproduced with the CSS overflow property.
You can use this fake textarea in a form normally, i.e: if you have to submit its content through POST method, you could do something like(with jQuery):
<input type="hidden" id="fake_textarea_content" name="foobar">
...
$('#your_form').submit(function()
{
$('#fake_textarea_content').val($('#fake_textarea').html());
});
You Can't style the content of a text area separately, you have to use <div>s, or something similar.
Do you Want Something like this:?
http://jsfiddle.net/mekwall/XNkDx/
$('.editable').each(function(){
this.contentEditable = true;
});
This allows you to edit the content of a div, and it will still look like a textarea,
Bold will now Work.
You cannot use HTML inside TEXTAREA.
Scrolling can be applied to any element by adding overflow: auto and fixed width and/or height.
You can user html editors for web like CKEditor to be able to format the data in text area. Check this http://ckeditor.com/
Another way to submit the "fake" text area is including the following lines inside the form tag
<form onsubmit=" $('#fake_textarea_content').val($('#fake_textarea').html());">
</form>
Related
I am trying to use my <div> element as <p> a element.
The HTML doesn't allow this and when I try to use <p> inside <p> or <h1> inside <p> I got
my <p> wrapper closed. (something like this <p></p><h1>blah</h1>)
I need that my <div> get the same behavior of my <p> tag.
Can I do this using css style?
[UPDATE]
Just to explain, I need to do this because I am using tinymce and abcpdf.. the rendered pdf over the html has problems when text is rendered inside div.
I think that default values of the parent (in this case, the <div>), get over not assigneds properties.
[/UPDATE]
Thanks in advance.
try to use
<span>
instead
<div>
The tag is used to group inline-elements in a document.
The tag provides no visual change by itself.
The tag provides a way to add a hook to a part of a text or a part of a document.
References:
http://www.w3schools.com/tags/tag_span.asp
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_span
in the custom styles inside CKEditor, I have created a "Tip" block element that I want to have span one or more paragraphs. However, when I am editing my text (using the inline editor), I am unable to get the block style to work across multiple paragraphs.
My style looks like this:
CKEDITOR.stylesSet.add('authorStyles', [
// Block-level styles
{
name: 'Yellow Tip',
element: 'p',
styles: {
margin: '1em 0',
padding: '20px 20px 4px',
border: '1px solid',
'border-radius': '15px',
'background-color': '#FFC',
'border-color': '#CC9'
}
}
]);
In the config.js, I added the line to wire-up the custom style
// custom styles
config.stylesSet = 'authorStyles:../authorStyle.js';
And here is my HTML:
<div class="section right" contenteditable="true" id="contentToSubmit">
<p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
<p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
<p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
<p>Here we have some addtional content that is also editable as well in addition to being just some text on its own right.</p>
</div>
Unfortunately, when I select two paragraphs to be contained in my div, they both display as their own blocks, instead of both <p> tags being inside my custom <div>.
Paragraphs not displaying properly inside custom block style div
I tried resetting the default enter key behavior (via the enterkey extra plugin), but the only thing I could get to work is setting the enter key behavior to line break (<br/>) which isn't desirable.
I have looked around for help on this particular issue, but can't seem to find an article that deals with this problem. Can anyone help me? We are trying to determine whether ckeditor will be sufficient for our needs, but this is a big blocking issue for our content editors.
The short answer is:
Defined your style as a div style, because you want it to apply to divs not ps, right? So you should have: element: 'div'.
Instead of applying the style through styles combo, what will replace paragraphs with divs, use the "Div" button to open the "Create Div Container" dialog and choose your style in the dialog.
For my website, i need to provide arabic support. Part of it is to provide input textboxes where when user types in, the new characters have to be appended to the left and the text has to be right aligned.
setting the css property to
text-align:right
didn't work, as i could not get the cursor to come to the left and add letters there. So I removed that property and added
direction:RTL
Here, the cursor came to the left and text was right aligned. but the newly added characters were not getting appended to the left. Instead they were getting appended to the right end only.
How do I fix this? please help..
For example, see the google arabic page search box. I need the exact behavior, although not with those fancy keyboard icon etc., http://www.google.com/webhp?hl=ar
You can use the dir="rtl" on the input. It is supported.
<input dir="rtl" id="foo"/>
Here's what I can think of:
Use direction:RTL for the RIGHT alignment
Write a JavaScript handler attached to the event: "onkeyup", which performs the shifting of the entered character to the LEFT (doing some text processing).
function rtl(element)
{
if(element.setSelectionRange){
element.setSelectionRange(0,0);
}
}
<input type="text" name="textbox" style="direction:RTL;" onkeyup="rtl(this);"/>
This code will do.
Simply use this CSS, this will change your text field and cursor position from right to left.
input, textarea {
unicode-bidi:bidi-override;
direction: RTL;
}
Use only direction:RTL and when switched to a proper keyboard (e.g. Arabic) in the system settings, the newly added characters will correctly be appended to the left.
A feature specific to Angular Material, in addition to direction: rtl, is :
.mat-form-field {
text-align: start!important;
}
This will work for both RLT & LTR
A better, more user-friendly way to do this is to set the dir attribute to auto.
<input dir="auto" id="foo"/>
This way if a user enters English text it will be left-aligned and if he enters Arabic text it will be right-aligned automatically
See here for more information on the dir attribute
Use on the input in css.
input {
unicode-bidi:bidi-override;
direction: RTL;
}
It works for Chrome browser.
Use a div element and make it editable.
<div contenteditable="true">
</div>
Is there any HTML tag that will wrap my text without changing its style at all? I've tried <pre> but that makes it look weird. I need this because I'm trying to include Literal content within a System.Web.UI.ControlCollection.
<span> is what you are looking for.
Dear all, I save formatted text (bold, changed in font, style...etc) in an nvarchar(max) field, its for some Description field, on another stage, I want to be able to edit this description, so in the Editing Page, I read the original inoformation, fill it in the fields and wait for the user to change it and save, this is working for all kinds of normal text fields, and also with normal text displayed in a text area, but when I fill the text area with the styled text, it shows the HTML code and not it result, so for instance, it shows:
<span style="font-weight: bold; text-decoration: line-through;">SM</span><span style="background-color: rgb(51, 102, 255);">ART</span><br>
Instead of a what it should look like, any suggestions on how I can make the textArea (normal asp.net textbox with the mode set to multiline) display the HTML as it should look and not the code??
You can not display HTML result in TextArea/TextBox control. But to display HTML result you have many options.
As Schnalle said, best and the easy way to use an editor. Like tinyMCE or FCKEditor.
In a project I used a div to display and edit HTML content. It allows users to edit, copy, paste, make bold, make italic, .. etc. :
<div runat="server" ID="divContent" contenteditable="true">
Editable Area, set your content here...
</div>
Maybe you can combine textarea and div to do what you want.
you need a wysiwyg-editor like tinyMCE http://tinymce.moxiecode.com/
If you just want it to display the code, use < as <, and > as >.
Eg:
<textarea>
<html>
<body>
</body>
</html>
</textarea>