Html href in textarea

HTML Tag

The tag defines a form field where user can input a multi-line text. Unlike the tag, text wrapping inside is allowed when the form is submitted.

A text area can have an unlimited number of characters. The text within this tag is rendered in a fixed-width font (usually Courier).

Syntax

The tag comes in pairs. The content is written between the opening (<textarea>) and closing () tags.

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> form action="/form/submit" action="post"> textarea name="comment" rows="12" cols="35">Send your comments to the author. textarea>br> input type="submit" name="submitInfo" value="Submit"> form> body> html>

Result

In this example we use the to define the text field, the name attribute to assign a name to this field (“comment”), the rows attribute to set its height (12 symbols) and the cols attribute to set its width (35 symbols).

Styling the element with CSS

The tag is considered to be a replaced element, as it has some intrinsic dimensions. Styling this tag is relatively easy with regular CSS.

Its valid and invalid values can be highlighted with the :valid and :invalid pseudo-classes. Valid and invalid values of a element can be highlighted using the :valid and :invalid pseudo-classes.

In most browsers, is resizable due to the CSS resize property. Resizing is enabled by default. You can disable it putting the resize value to none.

Example of the HTML tag with CSS properties:

html> html> head> title>Title of the document title> style> .comment < width: 60%; height: 100px; padding: 10px; outline: 0; border: 3px solid #1c87c9; background: #d0e2bc; line-height: 20px; > style> head> body> form> p>Here we use CSS styles to customize the look of the text field. p> textarea class="comment"> Send your comments to the author. textarea> br> input type="submit" name="submitInfo" value="Submit"> form> body> html>

In this example we use CSS styles to customize the look of the text field.

Attributes

Attribute	Value	Description
autocomplete	on off	Specifies whether or not a text field should have autocomplete enabled.
autofocus	autofocus	Defines that a text area should automatically get focus when the page loads.
cols	number	Defines the visible width of a text area. Default value is 20 symbols.
dirname	textareaname.dir	Defines the text direction of the textarea when submitted.
disabled	disabled	Defines that a text area should be disabled.
form	form_id	Defines one or more forms the text area belongs to (via id).
maxlenght	number	Defines the maximum number of characters allowed in the text area.
minlength	number	Defines the minimum number of characters allowed in the text area.
name	text	Defines a name for a text area.
placeholder	text	Defines a short hint that describes the expected value of a text area. The hint is shown when the field is empty, and disappears when it gets focus.
readonly	readonly	Defines that a text area is read-only.
required	required	Defines that a text area must be filled out before the form is sent.
rows	number	Defines a visible number of rows in a text area. Default value is 2.
spellcheck	true false default	Specifies whether the text in the tag should be spell checked by the underlying browser/OS.
wrap	Defines how the text in a text area is to be wrapped when the form is submitted.
	soft	-(default value) the text is sent without any additional line breaks inserted.
	hard	-the browser automatically inserts line breaks so that each line has no more than the width of the control; for this to take effect the cols attribute must be specified.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

• CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
• CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
• CSS font-size property sets the size of the font.
• CSS font-weight property defines whether the font should be bold or thick.
• CSS text-transform property controls text case and capitalization.
• CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

• CSS color property describes the color of the text content and text decorations.
• CSS background-color property sets the background color of an element.

Text layout styles for tag:

• CSS text-indent property specifies the indentation of the first line in a text block.
• CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
• CSS white-space property specifies how white-space inside an element is handled.
• CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

• CSS text-shadow property adds shadow to text.
• CSS text-align-last property sets the alignment of the last line of the text.
• CSS line-height property specifies the height of a line.
• CSS letter-spacing property defines the spaces between letters/characters in a text.
• CSS word-spacing property sets the spacing between words.

Источник

Html href in textarea

Answered by:

Question

User-2089506584 posted
Hello, How to add links in a TextArea using MVC? This one doesn’t look good. [:(]

Answers

ASP.NET MVC is a pauper when compared to WebForms. That’s not necessarily a bad thing. Remember, WebForms has a huge head start over ASP.NET MVC. So much of what you will need in ASP.NET MVC will force you to either create your own or borrow from some other ASP.NET MVC example. If you know HTML and CSS, creating grids with or without tables will be relatively easy. Your challenge will be if you want to emulate your end user’s experience to be like a that of a Windows GUI application. HTML was never designed for that. So now you have to add scripting such as JavaScript. However, your end user can disable scripting so you may also need a

All replies

User-434868552 posted
This applies to more than just textarea . with ASP.NET MVC, in fact AFAIK, for any API, you can only provide parameter values for an API override that meets your need. http://msdn.microsoft.com/en-us/library/system.web.mvc.html.textareaextensions.textarea%28VS.100%29.aspx
Problem is with TextArea, you can not have multiple field values, i.e. a list, example:
TextArea(HtmlHelper, String) here you can only have the name of the field. Here TextArea(HtmlHelper, String, String) you can also provide a SINGLE value for the TextArea contents. So you have to build the second String above as a complete single string that meets your needs.
Unfortunately the msdn library API’s give for all intents and purposes no examples (not 100% true, sometimes you actually find useful examples; unfortunately imo there are not enough examples). Another problem is that sometime exactly the same description is given for each method override (very unprofessional imo). imperialx, you have not clearly stated your goal. A textarea is just «text». If you want to have clickable links in your textarea, you would likely have to do some serious scripting magic client side. OTOH, if you are allowing a client end user to embed HTML in the textarea (remember, ultimately everything falls back to basic HTML) then you could use a trick such as markers. E.g.: http://asp.net/mvc You could parse that and return in a non textarea a true link. Remember to HTML encode your textboxes and textareas to prevent scripting attacks.
TIMTOWTDI =. there is more than one way to do it
Regards,
Gerry (Lowry)

Hi Gerry, I was thinking to use the textboxarea’a scrolldown button just like how the common email listing messages does it.
-imperialx

I was thinking to use the textboxarea’a scrolldown button just like how the common email listing messages does it.

Hi Ignatandrei,
Like data listings at YMail or GMail inbox, you have to use the scrollbar (Note: Not the browsers scrollbar) to see your current or previous messages. Do you think it uses the textboxarea that use it’s own scrollbar?

Источник

How to allow HTML in a textarea

Hi,
I need to make my textarea html compatible. just like a visual editor, where i can embed html tags like , . is there any way to do this with html coding .

• 5 Contributors
• 12 Replies
• 6K Views
• 3 Weeks Discussion Span
• Latest Post 12 Years Ago Latest Post by twiss

Recommended Answers Collapse Answers

Not sure what you are asking, can you clarify a bit more? Any text file saved as filename.html should do the trick?

So, can you begin by telling us what text box you are refering to? Is it like a text box on an existing website like the one I am typing in now? If so, give url to the site, or paste your code here.

In a text box like that the contents are interpreted as text only; HTML markup is ignored. Depending on the type of input form and coding like php or other, you can allow html in the text box by coding it like that, but if you are going to use …

All 12 Replies

Not sure what you are asking, can you clarify a bit more? Any text file saved as filename.html should do the trick?

Hi Kraai,
thanks for the response and sorry about my english.
Well i just want to make my textarea html compatible.
Like if i am using My Name.
It doesn’t make my name Bold. rather than it display it as it is.
HTML is ignored by textbox.

So, can you begin by telling us what text box you are refering to? Is it like a text box on an existing website like the one I am typing in now? If so, give url to the site, or paste your code here.

In a text box like that the contents are interpreted as text only; HTML markup is ignored. Depending on the type of input form and coding like php or other, you can allow html in the text box by coding it like that, but if you are going to use this on line, it is not reccommended at all, as it gives hackers a backdoor to insert malicious code into your datanase.

there is a plugin, bbcode, that you may be able to install and use, it is the one used on this site that allows bold underline color and the [code=language] syntax highlighting [/code] that makes the site easier to read

Источник

Обернуть выделенный текст тегами в textarea

С помощью JS-свойств selectionStart и selectionEnd можно сделать оборачивание выделенного текста тегами или BB-кодами. Рассмотрим пример добавления тега :

$('#button-b').click(function()< var control = $('#control')[0]; var start = control.selectionStart; var end = control.selectionEnd; if (start != end) < var text = $(control).val(); $(control).val(text.substring(0, start) + '' + text.substring(start, end) + '' + text.substring(end)); // Ставим каретку в конец добавленного тега. $(control).focus(); var sel = end + 7; control.setSelectionRange(sel, sel); > return false; >);

Результат:

Жирный Курсив Подчеркнутый Зачеркнутый Ссылка . 

function addTag(open, close) < var control = $('#control')[0]; var start = control.selectionStart; var end = control.selectionEnd; if (start != end) < var text = $(control).val(); $(control).val(text.substring(0, start) + open + text.substring(start, end) + close + text.substring(end)); $(control).focus(); var sel = end + (open + close).length; control.setSelectionRange(sel, sel); >return false; > // Жирный $('#button-b').click(function()< return addTag('', ''); >); // Курсив $('#button-i').click(function()< return addTag('', ''); >); // Подчеркнутый $('#button-u').click(function()< return addTag('', ''); >); // Зачеркнутый $('#button-s').click(function()< return addTag('', ''); >); // Ссылка $('#button-a').click(function()< return addTag('', ''); >); // При клике на кнопки не снимаем фокус с textarea. $('a').on('mousedown', function() < return false; >);

Результат:

Комментарии 1

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

У текстовых полей (textarea, input text и т.д.) есть JS-свойства selectionStart и selectionEnd, которые возвращают.

getSelection() возвращает выделенный пользователем текст, за исключением текстовых полей, ​для них используются.

Сборник jQuery приемов с textarea — получить содержимое, вставить значение, подсчет количества символов и строк и т.д.

Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все сбрасывается. В место него можно использовать чекбоксы в выпадающем списке.

Источник