I want my textbox in HTML page only accept number from 0 to 10, also accept: 0.5, 1.2, ...
Thanks alot
Try this
<script>
function checkfloat(e,field){
if (!(((e.keyCode>=48)&&(e.keyCode<=57))||(e.keyCode==46)))
{
e.keyCode=0;
}
if (e.keyCode==46)
{
var patt1=new RegExp("\\.");
var ch =patt1.exec(field);
if(ch==".")
{
e.keyCode=0;
}
}
}
</script>
<input type="text" onkeypress="checkfloat(event, this.value)">
You can use Regex for doing that!
The HTML5 number input type can do this:
<input type="number" min="0" max="10" />
However browser support for this is still poor. Only Chrome, Safari and Opera support this at this point in time.
Give it a test in Chrome though.
Demo
Related
How do you disable Autocomplete in the major browsers for a specific input and/or the complete form.
I found this solution:
<input type="text" name="foo" autocomplete="off" />
However, this does not seem to work in all browsers. I've had problems in firefox for instance.
Edit:
My firefox issue has been resolved. That leaves the following: Can I disable autocomplete on a form or do I have to give every input autocomplete="off"
Autocomplete should work with the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.
But alas, you could try adding autocomplete='off' to your <form> tag instead of the <input> tag, unless there's something preventing you from doing that.
If that doesn't work, you could also use JavaScript:
if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName(“input”);
for (i=0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf(“disableAutoComplete”) != -1)) {
inputElements[i].setAttribute(“autocomplete”,”off”);
}
}
}
Or in jQuery:
$(document).ready(function(){
$(':input').live('focus',function(){
$(this).attr('autocomplete', 'off');
});
});
You could try manually clearing text fields on page load with javascript, for example:
window.onload = function() {
elements = document.getElementsByTagName("input");
for (var i=0; i<elements.length; ++i) {
elements[i].value = "";
}
};
This might not work if it's executed before the autofill. Another option is to generate part of the name attributes for your inputs randomly each time the page is rendered (and strip them out when the server handles the submit), then the browser won't try to autocomplete.
See also Is autocomplete="off" compatible with all modern browsers?
I found this one. It hides on chrome, edge and opera
<form autocomplete="off">
<input role="presentation" />
</form>
IE: autocomplete
Firefox， Chrome， Opera: disableautocomplete
<input type="text" autocomplete="off" disableautocomplete id="number"/>
I am wondering if the form validation with Safari Browser (MAC OS and Version 7.0.4 (9537.76.4)) when using input type="number" is not working properly:
When visiting
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_max_min
with Safari Browser I expect that I would get a warning when I enter a letter or a number outside the specified range into the "Quantity" field. But nothing happens and the input is sent to the server...
When using Chrome I get a warning...
I also have checked the http://html5test.com site and it states that the input type number and the min and max attribute are supported. But why then is it not working?? What am I doing wrong or what am I not understanding?
Any help greatly appreciated...
Thanks
Tobi
Edited: As Frank Conijn mentions it is not really working with Safari. I now solved it with Javascript (Check all number input fields if they contain a number and if it is within the specified bounds):
$("input[type='number']").change(function(){
var maxValue = parseInt($(this).attr('max'));
var minValue = parseInt($(this).attr('min'));
var enteredValue = parseInt($(this).val());
if($.isNumeric(enteredValue)) {
var enteredValue = parseInt($(this).val());
if (enteredValue > maxValue) {
$(this).val(maxValue);
} else if (enteredValue < minValue) {
$(this).val(minValue);
}
} else {
$(this).val(minValue);
}
});
According to Can I Use dot com, form validation is currently poorly supported by Safari. By Safari on iOS not at all, even. And there is only partial support by Safari on non-tablets. See http://caniuse.com/form-validation.
if you still looking for the answer you can use input type="number".
min max ork if it set in that order:
1-name
2-maxlength
3-size
4-min
5-max
just copy it
<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />
in html5, there is tag "required" for input,
eg:<input type="text" required="required" value="" />
but it is working on Firefox,Opera and Chrome, but not for IE and Safari, i tried to include <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>, but it is still not working !
As Explosion Pills mentioned in his comments, the required form attribute is not supported by Safari or versions of Internet Explorer lower than 10.
You can get around this by using a third-party JavaScript plugin that will enforce form validation regardless of browser version. See https://github.com/dilvie/h5Validate.
You can't use html5shiv to add require.
Try something like this (uses JQuery): http://jsfiddle.net/DfCHu/
$('form').submit(function() {
var empty_fields = $('input').filter(function() {
//return empty required fields
return $(this).attr("required") && $(this).val() === "";
});
// if empty required field stop the form submitting and let the user know
if(empty_fields.length){
alert('something required');
return false;
}
});
Is there a way I can also set some label text for each steps in the HTML5 type=range control. Basically I have a range control <input type="range" step=1 min=0 max=4> and for each steps I want some label to be shown in the control. Is there a way to do this?
I've put together for you.
// define a lookup for what text should be displayed for each value in your range
var rangeValues =
{
"1": "You've selected option 1!",
"2": "...and now option 2!",
"3": "...stackoverflow rocks for 3!",
"4": "...and a custom label 4!"
};
$(function () {
// on page load, set the text of the label based the value of the range
$('#rangeText').text(rangeValues[$('#rangeInput').val()]);
// setup an event handler to set the text when the range value is dragged (see event for input) or changed (see event for change)
$('#rangeInput').on('input change', function () {
$('#rangeText').text(rangeValues[$(this).val()]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="rangeInput" name="rangeInput" step="1" min="1" max="4">
<label id="rangeText" />
I guess the easiest solution (plain Javascript) is:
<fieldset>
<label for="rangeVal">resolution (dpi):</label>
<input type ="range" max="1000" min="20"
oninput="document.getElementById('rangeValLabel').innerHTML = this.value;"
step="1" name="rangeVal" id="rangeVal" value="200">
</input>
<em id="rangeValLabel" style="font-style: normal;"></em>
</fieldset>
This code does not need jQuery nor CSS and should work on any browser that supports the range input type.
Here's an alternative solution, no jQuery required. Uses the HTML5 oninput event handler, and valueAsNumber property of the input element.
Works on my machine certification: Chrome v54
<form name="myform" oninput="range1value.value = range1.valueAsNumber">
<input name="range1" type="range" step="1" min="0" max="4" value="1">
<output name="range1value" for="range1" >1</output>
</form>
OP,
I put together a demo that uses a range input with corresponding <p> tags that act as both labels for the current state of the slider, as well as triggers to change the slider's value.
Plunk
http://plnkr.co/edit/ArOkBVvUVUvtng1oktZG?p=preview.
HTML Markup
<div class="rangeWrapper">
<input id="slide" type="range" min="1" max="4" step="1" value="1" />
<p class="rangeLabel selected">Label A</p>
<p class="rangeLabel">Label B</p>
<p class="rangeLabel">Label C</p>
<p class="rangeLabel">Label D</p>
</div>
Javascript
$(document).ready(function(){
$("input[type='range']").change(function() {
slider = $(this);
value = (slider.val() -1);
$('p.rangeLabel').removeClass('selected');
$('p.rangeLabel:eq(' + value + ')').addClass('selected');
});
$('p.rangeLabel').bind('click', function(){
label = $(this);
value = label.index();
$("input[type='range']").attr('value', value)
.trigger('change');
});
});
CSS
input[type="range"] {
width: 100%;
}
p.rangeLabel {
font-family: "Arial", sans-serif;
padding: 5px;
margin: 5px 0;
background: rgb(136,136,136);
font-size: 15px;
line-height 20px;
}
p.rangeLabel:hover {
background-color: rgb(3, 82, 3);
color: #fff;
cursor: pointer;
}
p.rangeLabel.selected {
background-color: rgb(8, 173, 8);
color: rgb(255,255,255);
}
Also worth nothing, if you're interested in showing the current value as a label/flag to the user, (instead of many) there's a great article by Chris Coyier on value bubbles for range sliders.
There is no native way of doing it. And as input[type=range] is very poorly supported, I will recommend using jQuery UI slider and the way of attaching labels found here in answer.
You can use jSlider. Its a jQuery slider plugin for range inputs.
https://github.com/egorkhmelev/jslider
Just check out the demos and documentation. Hope this helps.
FWIW the standard (HTML 5.1, HTML Living Standard), specifies a label attribute for options when using a datalist. Sample code here.
This isn't implemented by any browser yet.
This works in Chrome and any other browser that supports placeholder text in HTML5
<input id="name" name="name" type="text" placeholder="Please enter your name..." required /> <br />
But, it doesn't work in 3.5 and earlier of Firefox, and obviously IE8, and possibly other browsers.
How do I achieve the same thing (preferably in HTML/CSS - if not I am open to suggestions), to support all the older browsers? If not every single browser, at least Firefox and IE.
Safari and Chrome already support it (or the latest versions anyway).
Thanks.
One day I'll get around to properly documenting this, but see this example: http://dorward.me.uk/tmp/label-work/example.html
In short — position a <label> under a transparent <input> using <div> to provide background colour and borders.
Then use JS to determine if the label should be visible or not based on focusing.
Apply different styles when JS is not available to position the label beside the element instead.
Unlike using the value, this doesn't render the content inaccessible to devices which only display the focused content (e.g. screen readers), and also works for inputs of the password type.
I use this one: https://github.com/danbentley/placeholder
Lightweight and simple jQuery plugin.
Here is the simplest solution that I found working everywhere:
<input id="search"
name="search"
onblur="if (this.value == '') {this.value = 'PLACEHOLDER';}"
onfocus="if (this.value == 'PLACEHOLDER') {this.value = '';}"
/>
Replace PLACEHOLDER with your own.
At the moment, FF3 does not yet support the "placeholder" attribute of the "input" element. FF4, Opera11 and Chrome8 support it partially, i.e. they render the placeholder text in the field, but do not delete it when the user focuses in the field, which is worse that not supporting it at all.
I use the following snippet that I wrote with jQuery. Just add a class of textbox-auto-clear to any textbox on the page and you should be good to go.
<input type="text" value="Please enter your name" class="textbox-auto-clear" />
$(".textbox-auto-clear").each(function(){
var origValue = $(this).val(); // Store the original value
$(this).focus(function(){
if($(this).val() == origValue) {
$(this).val('');
}
});
$(this).blur(function(){
if($(this).val() == '') {
$(this).val(origValue);
}
});
});
I assume that you want to keep using the placeholder attribute for HTML5 browsers, in which case you'd have to do some browser detection and only apply the jQuery solution to browsers that don't support it.
Better yet, you can us the Modernizer library, as outlined in this answer.
Detecting support for specific HTML 5 features via jQuery
Here is a MooTools Plugin, that brings the placeholder to browsers that don't support it yet:
http://mootools.net/forge/p/form_placeholder
I use this one: https://github.com/Jayphen/placeholder
This lightweight and simple jQuery plugin is a fork of danbentley/placeholder.
Advantage: it adds a class "placeholder" to input fields that are temporarily filled.
Css ".placeholder {color:silver}" make the polyfill text look like a placeholder instead of regular input text.
Disadvantage: It doesn't polyfill the placeholder of a password field.
By the way...if anyone is interested...I found a nice elegant solution that is a jQuery plugin that is SOOO nice.
It literally is one line of jQuery, a minified js plugin, along with a simple class name on the input.
http://labs.thesedays.com/projects/jquery/clearfield/
It's the most beautiful thing I have discovered, next to 'Placeholder' in html.
The trick is to use javascript functions onBlur() and onFocus().
Here is the code that worked for me:
<script language="javascript" type="text/javascript" >
var hint_color = "grey", field_color = null;
var hinted = true;
function hint() { // set the default text
document.getElementById('mce-EMAIL').style.color = hint_color;
document.getElementById('mce-EMAIL').value = "<?php echo SUBSCRIPTION_HINT; ?>";
hinted = true;
}
function hintIfEmpty() { // set the default text, only if the field is empty
if (document.getElementById('mce-EMAIL').value == '') hint();
}
function removeHint() {
if (hinted) {
document.getElementById('mce-EMAIL').style.color = field_color;
document.getElementById('mce-EMAIL').value = "";
hinted = false;
}
}
function send() {
document.getElementById('subscription_form').submit();
hint();
}
</script>
<div style="position:absolute; display: block; top:10; left:10; ">
<form id="subscription_form" action="<?php echo SUBSCRIPTION_LINK; ?>" method="post" target="_blank">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" style="width: 122px;" onBlur="hintIfEmpty();" onFocus="removeHint();" required>
<font style="position: relative; top:-1px;"><b>ok</b></font>
</form>
</div>
<script language="javascript" type="text/javascript" >
field_color = document.getElementById('mce-EMAIL').style.color;
hint();
</script>
SUBSCRIPTION_HINT (i.e.: "your e-mail" ) and SUBSCRIPTION_LINK (i.e.: the value of the 'action' tag in your EN mailchimp embed code...) are PHP constants used for localization.
For "placeholder" work in Firefox just add the attribute
::-moz-placeholder
in CSS tags.
Works for me, change your CSS to
::-webkit-input-placeholder {
color: #999;
}