How to set the css of a textarea not to be clicked on it.
<textarea></textarea>
Thanks
Try
<textarea disabled="yes"></textarea>
In most browsers, this will grey out the content of the textarea though, and the user won't be able to copy any text from within it. If you don't like that, you can use:
<textarea readonly="yes"></textarea>
The textarea will then remain clickable, and the user will still be able to select/copy text within it, but he won't be able to edit it.
So you don't want the user to edit the contents of the textarea? Simple solution: Don't use textarea. Just use a normal div or pre and style it.
You Cant do this with CSS, you have to do it in the markup like so:
<textarea disabled="disabled"></textarea>
If you care to be By-The-Book & standard compliant it is as follows :
For "Unclickable"
<textarea readonly>
...
</textarea>
For "Grayed & unclickable" aka Disabled :
<textarea disabled>
...
</textarea>
You can find all other properties of "textarea" here.
Related
I just need to disable typing any text into text-area, I want to use text-area just for showing text. I am making a chat web-site.
You can just add readonly
<textarea cols="30" rows="10" readonly>Lorem ipsum dolor.</textarea>
For Angular applications use following syntax, it will not allow any pointer events but we can scroll the context
<textarea cols="30" rows="10" [readonly]="true/false">{{info}}</textarea>
Use disabled attribute for this
You can style this in CSS
Or If you want only to show text use div or span not textarea
Im using VS and created html page with textarea, I need to put the text in two rows from the start one above one like
row1:mytext
row2:mytext2
in order to make it work I should put it exactly like following and If I doing formatting to the page the text was removed from where I want it to be, there is a way to put the text in specific position in text area?
<div>
<textarea rows="2" cols="700" disabled="disabled" class="path-width">Expire: #ViewBag.CertExpireDate
Subject: #ViewBag.Cert</textarea>
</div>
Try this;
<textarea rows="2" cols="700" disabled="disabled" class="path-width">Expire: #ViewBag.CertExpireDate#(Environment.NewLine)Subject: #ViewBag.Cert</textarea>
#(Environment.NewLine) will add new line and it will bot be removed when you do the formatting.
Add
ancii code between line. Demo
<textarea rows="2" cols="700" disabled="disabled">
Expire: #ViewBag.CertExpireDate
Subject: #ViewBag.Cert
</textarea>
UPDATED
You can remove whitespaces using jquery trim(). Example
var text = $('textarea').val().trim();
$('textarea').html(text);
It works for me.
<textarea rows="2" cols="700" disabled="disabled" class="path-width">
Expire: #ViewBag.CertExpireDate
Subject: #ViewBag.Cert
</textarea>
Maybe the css class
class="path-width"
causes this problem. Check http://jsfiddle.net/7SqHc/
I want to make a "comments plugin", so I started with the markup and a few styles.
Everything was fine until I added the textarea element
The HTML code for that element is:
<textarea rows="7" cols="37" placeholder="Ingrese su comentario">
</textarea>
But something weird happened, because when I loaded the page, a default text appears in the textarea.
Q1: What do you think is happening?
Q2: How fix it?
Here's a DEMO
Thanks,
Leonardo
PS: If it works, I work with Chrome 27.0.1453.116 version.
Remove line break in textarea from the markup. Any space, html formatting causes inclusion of space, newline etc between the textarea opening and closing tags and they are considered as the text and hence placeholder was not appearing for the textarea as it is not empty technically.
Change this:
<textarea rows="7" cols="37" placeholder="Ingrese su comentario">
</textarea>
to :
<textarea rows="7" cols="37" placeholder="Ingrese su comentario"></textarea>
Fiddle
and just give your textarea a padding-left to be consistent with other input boxes
textarea
{
padding-left:10px;
}
Maybe its Chrome AutoFill, wanting to help u fill your form. Choosing an Id or a name for the textarea, which is unique, should help.
Can you guys tell me how to show textarea cursor automatically? Usually when i click on textarea i have an text cursor. Is there any possibility to show it straightaway?
Set the autofocus attribute on the control. Note that this requires a browser that supports that particular bit of the HTML 5 draft.
<textarea rows="4" cols="30" autofocus></textarea>
It is also possible to set it with JavaScript, but that can interfere with normal use of the page (especially with screen readers which use the focus point to read from) (so can the autofocus attribute, but it is at least standard so screen reader software can be written to work around it).
The JavaScript technique I don't recommend is:
<textarea rows="4" cols="30" id="mytextarea"></textarea>
<script> document.getElementById('mytextarea').focus(); </script>
Note that this does not use the onload event. That event doesn't fire until the entire document, including dependancies such as images, is loaded so there is usually a significant delay in which the user might start interacting with the page. Setting the focus after that point is likely to break whatever the user is in the middle of.
You can set the focus. If you dont use any external libraries (like jQuery) try this:
<body onload="document.yourForm.yourTextarea.focus();">
<form name="yourForm">
<textarea name="yourTextarea"></textarea>
</form>
</body>
You can give focus to that textbox while loading page
It is HTMLElement called focus() method.
Here's the link with an example: http://www.w3schools.com/jsref/met_html_focus.asp
Use This Code: <textarea rows="20" cols="100">
Your HTML Code:
<textarea>
In a very simple HTML form I've created, I've asked the user to provide additional details and have coded this section as:
<textarea rows="1" cols="50" wrap="physical" name="comments">
</textarea>
Any idea why the cursor starts off at the middle of this box? Well, it's not directly at the middle, but it's definitely not at the start (top left) corner of the box. I see a lot of solutions here and they all require Javascript to correct this. Is there a way to do this with just html?
What happens when you change it to:
<textarea rows="1" cols="50" wrap="physical" name="comments"></textarea>
I think it's not starting at the beginning because you've got whitespace inside the tag.
The reason that this happens is because you have white space in between the <textarea> tag. Try this
<textarea rows="1" cols="50" wrap="physical" name="comments"></textarea>
That generally happens when we enter a space between two opening and closing "textarea" tag for readibility.
i.e your opening <textarea> tag and Closing </textarea> tags are on different lines or there are some white spaces between them.
That does sound strange. Have you looked in firebug to see what CSS effects it? The only thing that comes to mind is that it's under the influence of text-align: center