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
Related
I am trying to create a textarea where it shows text but when you click on it and write something the text disappears. For example, on some websites is says "Search" on the textbar and when you click it and write something, the text disappears (like Google). Here is the code that i wrote:
<textarea style="resize:none;" cols="35" rows="1" wrap="virtual">Search</textarea>
Sadly this code didnt work. It just writes some text on the textarea and it doesn't create a read-only text. I did my research and i couldn't find a question with a answer to my question. They were either not about HTML or they were about other things and not read-only. So can someone please help me with this? Thank you for your time. Have a wonderful day.
You can use the placeholder attribute.
<textarea style="resize:none;" cols="35" rows="1" wrap="virtual" placeholder="Search"></textarea>
You can use the placeholder attribute for that:
<textarea style="resize:none;" cols="35" rows="1" placeholder="Type something..." wrap="virtual"></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'm struggling to get inputted text to align with the top of an input textarea, on an HTML form, and have searched forums extensively, so I thought I'd post here.
I've tried using:
textarea{
vertical-align:top;}
and
input["textarea"]{
vertical-align:top;}
I've also tried adding autoflow:auto;
I think you are wanting to use a <textarea> instead of an <input>. Here's some background for you too, but you use different form elements for different things.
HTML
<input type="text" placeholder="input" value="input">
<br />
<textarea rows="10">Textarea that has text aligned to the top. No css needed</textarea>
Demo Here
Im not sure what your issue is but I will try and give an answer to what I believe is your problem :)
When you do like this:
<form>
<textarea cols="25" rows="5" required>
</textarea>
</form>
The spaces between your textarea is already rendered when you run the code - this means that when you wanna type in the textarea there is 100 different places you can begin texting.
I think what you wanna do is this:
<form>
<textarea cols="25" rows="5" required></textarea>
</form>
This way the texting in the textarea will begin in the top-left corner of the textarea, that is because you have not rendered any lines when you run this code.
DEMO of the two Versions:
http://jsfiddle.net/2thMQ/4/
I have an input field, in which a user will enter text inside. When the text becomes too long, the input field extends horizontally instead of dropping down vertically.
I tried adding this CSS:
overflow: hidden;
word-wrap: break-word;
but I had no luck. Any other suggestions on how to accomplish this?
I think you should use a multiline input field as TextArea:
http://htmlhelp.com/reference/html40/forms/textarea.html
Sample code:
<textarea rows="10" cols="30"></textarea>
Xtian - You shouldn't have any restriction on where you need to use an <input> or a <textarea>. Just give the text area the same name that you would've used for the input and you'll be fine.
For example, I just replaced
<input type="text" name="reply" />
With
<textarea rows="1" cols="26" name="reply"></textarea>
Much better now.
This is a soultion i found, Just use a hidden input and use a button for the text with a action for the form.
<form method="post" action="nextpage.php">
<input style="display: none;" name="name" type="text" value=“somedata"></input>
<button>Some text that you want to wrap but also submit the form </button>
</form>
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.