I just found that we can use this attribute to specify which case the letters should be entered in, but that doesn't work for me.
Example:
<input type="text" autocapitalize="words" name="subject" value="Website Feedback" />
I set this attr to words but still type with lover case each new word, so how it should work?
As many in the comments have pointed out, the attribute does not affect phisical keyboards. You can achieve this using javascript, by listening to the keyup event and capitalizing the text every time it changes. Here is a working example:
$(".autocapitalize").keyup(function () {
const originalValue = $(this).val();
const capitalizedValue = originalValue.replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());
$(this).val(capitalizedValue).focus()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="autocapitalize" autocapitalize="words" name="subject" value="" />
It seems that some browsers do not take this attribute into account more "autocapitalize attribute doesn't affect behavior when typing on a physical keyboard".
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
Maybe you should use a function instead.
Related
There is a similar question which limits the number of characters for allowed in a form input.
In my case I want to limit the number of digits that can be added after the decimal point to 2 digits.
<input type="text" maxlength="2"/>
Is there a way to limit the digits after a decimal point (.) ?
As I am not aware of any way to do it in HTML…
Here is how I'll do it with some JavaScript, using a RegEx to delete the extra decimals:
var myInput = document.querySelector('#fixed2');
myInput.addEventListener("keyup", function(){
myInput.value = myInput.value.replace(/(\.\d{2})\d+/g, '$1');
});
<input id="fixed2" type="text" />
Note that I used the keyup event here, so that you can see the automatic deletion. But it works great with input too!
⋅
⋅
⋅
We could generalize this method to work with multiple inputs, using a custom attribute like decimals:
(I'm using input event here, so you see the difference)
var myInputs = document.querySelectorAll('.fixed');
myInputs.forEach(function(elem) {
elem.addEventListener("input", function() {
var dec = elem.getAttribute('decimals');
var regex = new RegExp("(\\.\\d{" + dec + "})\\d+", "g");
elem.value = elem.value.replace(regex, '$1');
});
});
<input class="fixed" type="text" decimals="2" placeholder="2 decimals only" />
<br><br>
<input class="fixed" type="text" decimals="3" placeholder="3 decimals only" />
Hope it helps.
I think best option is to resovle this with jQuery validator, where you can add requirments for each field that you are using. If you are trying to resovle this with HTML5 it might happen that in some browsers it will not work in a way you want.
Check this --> https://jqueryvalidation.org/
--> https://jqueryvalidation.org/maxlength-method/
If you are comfortable using scripts, then you may try the following approach:
$(document).ready(function() {
$("input").on("blur", function() {
$(this).val(parseFloat($(this).val()).toFixed(2));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" step="0.01" min="0" />
The following solution works with number inputs and therefor defends against alphabetical characters (unlike the currently accepted answer):
function limitDecimalPlaces(e, count) {
if (e.target.value.indexOf('.') == -1) { return; }
if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
e.target.value = parseFloat(e.target.value).toFixed(count);
}
}
<input type="number" oninput="limitDecimalPlaces(event, 2)" />
Note that this cannot AFAIK, defend against this chrome bug with the number input.
I am working on a Chrome Packaged App so my code should only work in Chrome.
I have the following input
<input type="date" />
https://jsfiddle.net/jhbo4q2k/
On Chrome this automatically adds a DatePicker. I would like to only keep this Datepicker and disable the input by keyboard.
Is this possible?
EDIT:
The accepted answer works. Just be wary of this
https://developer.chrome.com/extensions/tut_migration_to_manifest_v2#inline_scripts
You cant use inline scripts in a packaged app.
You can use onkeydown and prevent user from entering the value.
<input type="date" onkeydown="return false" />
For ReactJS above solutions don't work
I had to do:
<input type="date" onKeyDown={(e) => e.preventDefault()} .... />
Hi you can prevent keyboard popup by using onfocus="blur()". Since when the element has the focus we will remove the focus out of it(native keyboards won't show) however with onclick we can continue with our operations.
<input type="date" class="form-control" onfocus="blur()" onclick="dosomework()" name="some-name" id="some-id" >
<script>
function dosomework(){
alert('hi');
}
<script>
If using django forms;
datetime = forms.DateTimeField(widget=forms.DateTimeInput(attrs={
'onkeydown': 'return false' # If you want to disable the keyboard
"onfocus": 'blur()' # If you also want to disable virtual keyboard(on smartphones).
}))
OR
document.getElementById('id_datetime').onkeydown = (e) => {
e.preventDefault();
}
document.getElementById('id_datetime').setAttribute('onfocus', 'blur()');
Django simply adds 'id' in front of the input field name and sets that as its id. Here the input field name is datetime, so the id will be id_datetime.
Easy Way To Enable & Disable Input Date:
Step 1: create input date.
<input type="date" id="dateEnd">
Step 2: create enable and disable button
<button onclick="disableBtn()">Disable Date Field</button>
<button onclick="undisableBtn()">Undisable Date Field</button>
Step 3: Javascript for enabling and disabling
<script>
function disableBtn() {
document.getElementById("dateEnd").disabled = true;
}
function undisableBtn() {
document.getElementById("dateEnd").disabled = false;
}
</script>
Hope, this may help you.
e.preventDefault() will do the job...
const inputDate = document.querySelector("input");
inputDate.addEventListener("keydown", function (e) {
e.preventDefault();
});
<input type="date">
Disabling keyboard input is a great way to make your application less accessible to people with disabilities and make it less user friendly in general, in my opinion keyboard input is much easier to use than date pickers, especially if the expected format is clear. You'd be better off doing some basic field validation to ensure that the input is sensible before letting it be submitted, the HTML date field already has strong validation on it by default on Chrome Firefox and Edge.
I have a form where users enter a surname. In case if they type it in all small case letters i want it to show up properly E.g. the user types in the word 'smith' but the response page will show 'Smith' instead?
<p>Name: <input type="text" name="surname"></p>
All you need to do is capitalize your input, look snippet below:
P.S. - I edited your p class so you don't get confused when you apply the style to input. Because it could affect every input you may have in your site if was applied to input itself.
.surname input {
text-transform: capitalize
}
<p class="surname">Name:
<input type="text" name="surname">
</p>
EDIT: here is jQuery solution, that will solve your problem with response page.
jQuery.fn.capitalize = function() {
$(this[0]).keyup(function(event) {
var box = event.target;
var txt = $(this).val();
var start = box.selectionStart;
var end = box.selectionEnd;
$(this).val(txt.replace(/^(.)|(\s|\-)(.)/g, function($1) {
return $1.toUpperCase();
}));
box.setSelectionRange(start, end);
});
return this;
}
$('.surname input').capitalize();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p class="surname">Name:
<input type="text" name="surname">
</p>
You could check the input value in the browser using Javascript and modify the value if the first character is not upper case. I'd recommend JQuery for that. Or use CSS to capitalize it.
Also note that browser-side Javascript or CSS transformations don't guarantee that a POST of your form will only send capitalized input; whatever happens in the browser can be bypassed. Hence, server-side you will want to do the same (capitalize if necessary).
Speaking of surnames, would you capitalize "van der Vaart"?
CSS:
text-transform: capitalize;
<p>Name: <input type="text" style="text-transform: capitalize;" name="surname"></p>
I'd like to change the font size into an <input type="text" size="10> dynamically to fill the box. Here are some examples:
With less chars:
With more chars:
Is it possible?
I know JQuery and JavaScript weren't mentioned or tagged, but what you want will need JavaScript, and the JQuery.InputFit plugin will do exactly what you want:
<input type="text" name="younameit" id="input">
<script type="text/javascript">
$('input').inputfit();
</script>
I'm a little late to this question, but I want offer a solution in case you don't want to implement jquery just for this:
<p>A function is triggered when the user releases a key in the input field. The function transforms the characters size.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
function myFunction(){
var x=document.getElementById("fname");
var initialSize=25-x.value.length;
initialSize=initialSize<=10?10:initialSize;
x.style.fontSize = initialSize + "px";
}
check out this jsfiddle
On one of my websites I have created a form that collects the persons name, email and a description of their idea.
I limited the characters of the description to 500 characters as I don't want to read a ton and I figured out how to have the text appear in the textarea before the user inputs what they want.
Currently the user has to delete "Description of your idea" themselves but I want to add the placeholder class where it deletes what I have written in the textarea when they click the textarea
I have looked on a few sites and couldn't figure out how to use it I placed it in my code, but usually the class just appeared as text inside my textarea.
Any help on using this class would be great thank you
Here is what I have written
Inside the head tags
<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
} else {
limitCount.value = limitNum - limitField.value.length;
}
}
</script>
Inside the body tags
<form name="form1" method="post" action="ideas.php">
Your Name: <input type="text" name="name"><br>
Your Email: <input type="text" name="email"<br>
<textarea name="desc" cols=50 rows=10 onKeyDown="limitText(this.form.desc,this.form.countdown,500);"
onKeyUp="limitText(this.form.desc,this.form.countdown,500);">Description of your idea</textarea><br>
<font size="1">(Maximum characters: 500)<br>
You have <input readonly type="text" name="countdown" size="3" value="500"> characters left.</font>
<br>
<input type="submit" name="Submit" value="Submit!"> </form>
There is a feature in HTML5 called 'placeholders', which produces exactly this feature without you having to do any coding at all.
All you need to do is add a placeholder attribute to your form field, like so:
<input type='text' name='name' placeholder='Enter your name'>
Sadly, of course, only a few browsers currently support it, but give it a go in Safari or Chrome to see it in action. The good news is that it is being added to virtually all browsers in the near future.
Of course, you still need to cater for users with older browsers, but you may as well make use of the feature in browsers that can use it.
A good way to deal with it is to use the placeholder attribute, and only fall back to the Javascript solution if the browser doesn't support the feature. The Javascript solution can take the text from the placeholder attribute, so you only need to specify it in one place.
See this page for how to detect whether the placeholder feature is supported: http://diveintohtml5.ep.io/detect.html
(or, as it says on that page, just use Modernizr)
The Javascript fall-back code is fairly simple to implement. Exactly how you do it would depend on whether you want to use JQuery or not, but here are links to a few examples:
http://www.morethannothing.co.uk/2010/01/placeholder-text-in-html5-a-js-fallback/
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
And of course Google will give you loads more if you search for html5 placeholder fallback or something similar.
Hope that helps.
Check out http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html I think it has what you are looking for.
Here is a simple page that has an email field on it that I quickly put together (pulled mostly from the tutorial).
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Focus auto-focus fields
$('.auto-focus:first').focus();
// Initialize auto-hint fields
$('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
if($(this).val() == $(this).attr('title')){
$(this).val('');
$(this).removeClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
if($(this).val() == '' && $(this).attr('title') != ''){
$(this).val($(this).attr('title'));
$(this).addClass('auto-hint');
}
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
if($(this).attr('title') == ''){ return; }
if($(this).val() == ''){ $(this).val($(this).attr('title')); }
else { $(this).removeClass('auto-hint'); }
});
});
</script>
</head>
<body>
<form>
Email: <input type="text" name="email" id="email" title="i.e. me#example.com" class="auto-hint" />
</form>
</body>
</html>
The title text is put in the field if it's empty, and removed once the user starts typing.