How to restrict text box length in HTML using Angular JS - html

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.

Related

How do i prepopulate textarea with data from database (or any text for that matter) in ASP.Net?

Ok, so basically i have an form which edits data in my database. I have the following inputs:
<input value="#title" type="text" asp-for="#Model.ProjName" class="form-control" placeholder="Ticket1" />
<textarea value="#description" type="text" asp-for="#Model.ProjDescription" class="form-control" rows="3"></textarea>
I can pre-populate the input just fine, however value doesn't work on the textarea. What is the correct way of populating it?
This will solve your problem. Text area acts differently from input tag . So instead of using value parameter, add your value between open and close tag of text area
<textarea type="text" asp-for="#Model.ProjDescription" class="form-control" rows="3">#Model.description</textarea>
Here is a .net fiddle with an example
https://dotnetfiddle.net/2TYEOk
Since you use asp-for="#Model.ProjDescription",so the default value will be #Model.ProjDescription,if you want to bind value with #description,you can try to use id and name to replace asp-for="#Model.ProjDescription".Here is the sample code:
<textarea type="text" id="ProjDescription" name="ProjDescription" class="form-control" rows="3" >#description</textarea>

How to disable input recommendations?

I'm trying to prevent recommendations from coming up on an input box I created.
<input type="text" class="form-control" name="message" id="msg"
placeholder="Type a message" autocomplete="false">
But even with autocomplete="false" I still get the following:
I don't want the recommendations to show up on the input box.
I believe you should try using "off" instead of "false".
autocomplete="off"
In context to your given scenario, try the following code snippet
<input type="text" class="form-control" name="message" id="msg"
placeholder="Type a message" autocomplete="off">
If your inputs are wrapped up in a <form> you can use this attribute on the form instead of each individual <input>.
It tells the browser not to save data inputted by the user for later autocompletion on similar forms, though heuristics for complying vary by browser.
Here is the reference.

<input type="text"> does not allow resizing

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>

Multiple patterns in <input>

I am trying to use multiple patterns for an input-field in HTML5.
<input type="text" pattern="\d*.{5,10}" name="plz">
My current input field does not work. Only the second pattern .{5,10} is relevant for the submit. The first attribute \d* hast no effects.
Try the below:
<input type="text" placeholder="" class="form-control" pattern="([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{4})([0-9]{1})">
and just accept AESE640526HOCCNL05...
Hope this can help you.

My website loads to first input form

If I go visit my website, the page immediately scrolls to the first input in the contact form page, rather than display at the top of the page. I could probably set the scrollTop in a jquery script to fix it but I would rather get a solution that would work without manipulating the page using jquery or javascript. Can anyone explain this behaviour or how to fix it?
site: http://danmacmill.host22.com/
Remove the autofocus part of that input, and that problem is gone.
It's because you have autofocus on <input name="name"/>. Try removing it.
I think this will cause you the problem
<form action="demo_form.asp">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
but if you use it this way it will solve your problem
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
Check this out
Remove autofocus property:
<span>Name*:</span>
<input name="name" placeholder="Please enter your name" type="text" tabindex="1" required autofocus>
It is because of the autofocus parametter you have on that input. You must remove it or manipulate with js