I have an html textbox that looks like this:
<div class="control-group">
<label class="required">
Enter stuff here
</label>
<input type="text" placeholder="Required Field" class="form-control" id="secid">
</div>
I do further processing on the 'secid' in the javascript file associated with the html file.
I need to increase the size of the textbox on-the-fly i.e. The more text I write, the input textbox gets bigger. There are questions related to this already such as this and this but none very clear. Could you help me it?
Try
<input size="5" style="font-family:Courier"; onkeyup="Expand(this);">
function Expand(obj){
if (!obj.savesize) obj.savesize=obj.size;
obj.size=Math.max(obj.savesize,obj.value.length);
}
this will increase and decrease textbox size on change.
DEMO
Try This
<input id="Test" size="2" type="text" onkeyup="Expand(this)"/>
And JavaScript as
function Expand(obj) {
obj.size = parseInt(obj.value.length);
}
DEMO
Related
I want to restrict my Comments text box within 40 characters. I have used max=40.Its not working. Anyone please help me to fix this issue
Code:
<label for="cmds">Comments</label>
<input type="text" max="40" class="form-control" id="cmds" name="cmds"
data-ng-model="Audit.cmds" placeholder="null" >
Since you are dealing with comments, its better to use textarea instead of input type="text".
By using textarea you can do:
<textarea maxlength="40" id="comments" cols="" rows="">
Demo: https://jsfiddle.net/akshaymhatre89/L8fky10q/4/
<label for="cmds">Comments</label>
<input type="text" ̶m̶a̶x̶=̶"̶4̶0̶"̶ class="form-control" id="cmds" name="cmds"
data-ng-model="Audit.cmds" placeholder="null"
ng-maxlength="40" />
For more information, see AngularJS ng-maxlength Directive API Reference.
I can't figure out why my input does not allow me to resize it.
<input type="text">
Example of the problem
I only want to have a working resize on my biginput class.
That's simply because <input type="text"> is ment for a single line.
You'll need to use <textarea></textarea> for this.
<input type="text" placeholder="I can't be resized"></input>
<textarea>I can be resized</textarea>
In order to do this in Google Forms, use the option 'Paragraph Text' instead of 'Text' when selecting an answer.
You need textarea for that :-
<textarea name="entry.585452596" type="text" class="biginput"></textarea>
I changed the type of Price to number but it has placed the label to the left, how can I correct this?
http://i.imgur.com/73JOIlA.png
End Date* (YYYY-MM-DD) <input type="text" name="eDate"><br>
Price* <input type="number" name="price"><br>
You can do a couple of things. Some more simple than others.
I know I've fixed this in the past by simply using <br>
soo.. Price*<br> <input type="number" name="price"><br>
Let me know if that doesn't work, I can suggest other solutions, like using width, display: block and floats etc.
You could go with either floating, expanding the width of the input field or using a label tag to then put that display:block; like for example this:
label{display:block}
<form>
<label for="eDate">End Date* (YYYY-MM-DD)</label>
<input type="text" name="eDate"/>
<label for="price">Price*</label>
<input type="number" name="price"/>
</form>
This would be the way I would handle it, but feel free to ask additional information if you'd require it!
I have a read only text-box, its value is coming from database.. I am not sure about text length..client wants that text-box to be dynamic based on content.
Is there any way to do with pure css??
Thanks in advance
<div class="form-item ">
<label class="control-label">Task Name</label>
<input class="form-control form-text" readonly="readonly" type="text"
value="text-box width should change based on my length">
</div>
No, you can't do this with a text input and CSS.
But if it's read-only, why use a text input? Why not create a span and style it to look like a text input?
The code shown below will prevent the user from entering any value in input type. Is there a way the box can be hidden in this case.
<input id="vendor" name="vendor" type="text"
class="txtsmall2" value="<%=variable%>" readonly="readonly"/>
I think you're looking for something like:
<input id="vendor" name="vendor" type="hidden"
value="<%=variable%>" /><span class="txtsmall2"><%=variable%></span>
Where you have a hidden input followed by a visible text element that is not an input but has the same value.
Changing type to hidden would hide the input field.
<input id="vendor" name="vendor" type="hidden"
class="txtsmall2" value="<%=variable%>" readonly="readonly"/>
As OP mentioned in a comment, if want to show the text content but not the borders, try:
<input style="border:0" "id="vendor" name="vendor" type="text"
class="txtsmall2" value="abc" readonly="readonly"/>
CSS can be in-line, internal, or external sheet. I kept it simple here.