In my HTML5 webapp I have a fieldcontain with a placeholder, say "Volume". Chrome displays the placeholder like it should do, but Safari doesn't display it at all. What could be the problem? Did I do smth. wrong?
Here is the code snippet:
<div data-role="fieldcontain">
<label for="Liter">Liter:</label>
<input type="number" min="0" max="36000" name="Liter" id="Liter" value="" placeholder="Liter" data-clear-btn="true"/>
</div>
Safari for Windows v. 5.1.7; Chrome for Windows v. 31.0.1650.63 m; jQuery v. 1.9.1; jQuery mobile v. 1.3.2
placeholder is not yet supported for every browser.
I always use jQuery for placeholders. An example using HTML5 Placeholder Fix JS:
$("'[placeholder]'").focus(function() {
var input = $(this);
if (input.val() == input.attr("'placeholder'")) {
input.val("''");
input.removeClass("'placeholder'");
}
}).blur(function() {
var input = $(this);
if (input.val() == "''" || input.val() == input.attr("'placeholder'")) {
input.addClass("'placeholder'");
input.val(input.attr("'placeholder'"));
}
}).blur();
Take a read here:
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
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"/>
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;
}
});
I think its a easy question, but i dont know how to search this question in google
I need a background text in a input-text field. Like: Insert Your Name.
And when i press in to the field to insert my name, the text disappears
Okay, thanks for the solution.
<input id="textfield" name="textfield" type="text" placeholder="correct" />
Now i get i second question. How can i change the color of the placeholder?
Here's my text-area:
http://jsfiddle.net/wy8cP/1/
Here is how you can get a placeholder using HTML5:
<input id="textfield" name="textfield" type="text" placeholder="enter something" />
EDIT:
I no longer recommend hacking together your own polyfills as I showed below. You should use Modernizr to first detect whether a polyfill is needed in the first place, and then activate a polyfill library that fits your needs. There is a good selection of placeholder polyfills listed in the Modernizr wiki.
ORIGINAL (contd):
And here is a polyfill for compatibility:
<input id="textfield" name="textfield" type="text" value="enter something" onfocus="if (this.value == 'enter something') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter something';}">
http://jsfiddle.net/q3V4E/1/
A better shim approach is to run this script on page load, and put your placeholders in the data-placeholder attribute, so your markup looks like this:
<input id="textfield" name="textfield" type="text" data-placeholder="enter something">
and your js looks like this:
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = inputs[i].getAttribute('data-placeholder');
inputs[i].addEventListener('focus', function() {
if (this.value == this.getAttribute('data-placeholder')) {
this.value = '';
}
});
inputs[i].addEventListener('blur', function() {
if (this.value == '') {
this.value = this.getAttribute('data-placeholder');
}
});
}
http://jsfiddle.net/q3V4E/4/
HTML5 provides a placeholder attribute that addresses this particular issue. See this link for more information (JSFiddle)
<input type="text" placeholder="insert your name" />
You can always provide a non-HTML5 javascript fallback, like the one explained here, or in None jquery placeholder fallback? if you aren't using JQuery.
I think you are looking for HTML5 form field placeholder... :)
http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
The jquery version of the non-html 5 accepted answer:
var inputs = $("input[type='text']", context);
$.each(inputs, function (i, obj) {
$(obj).val($(obj).attr('data-placeholder'));
$(obj).on('focus', function () {
if ($(this).val() == $(this).attr('data-placeholder')) {
$(this).val('');
}
});
$(obj).on('blur', function () {
if ($(this).val() == '') {
$(this).val($(this).attr('data-placeholder'));
}
});
});
Changing the color of the placeholder can be achieved with CSS:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
Source: https://css-tricks.com/almanac/selectors/p/placeholder/
For non-HTML5, I suggest a nice javascript solution such as toggleval.js - this allows you not to have to do every input field inline, yourself; it would be global.
http://snipplr.com/view/9077/
The script you would call to after that would be something like this:
<script type="text/javascript">
$(document).ready(function() {
// Input Box ToggleVal
$("input[type=text]").toggleVal();
$("input[type=password]").toggleVal();
});
</script>
<label for="input">Label</label><input type="file" id="input"/>
In Firefox 7 it is not possible to trigger the open file dialog by clicking on the label.
This SO question is very similar but that's green checked with it's a bug in FF. I'm looking for a workaround.
Any ideas?
thank you for this q&a... helped me out.
my variation of #marten-wikstrom's solution:
if($.browser.mozilla) {
$(document).on('click', 'label', function(e) {
if(e.currentTarget === this && e.target.nodeName !== 'INPUT') {
$(this.control).click();
}
});
}
notes
using document.ready ($(function() {...});) is unnecessary, in either solution. jQuery.fn.live takes care of that in #marten-wikstrom's case; explicitly binding to document does in my example.
using jQuery.fn.on... current recommended binding technique.
added the !== 'INPUT' check to ensure execution does not get caught in a loop here:
<label>
<input type="file">
</label>
(since the file field click will bubble back up to the label)
change event.target check to event.currentTarget, allowing for initial click on the <em> in:
<label for="field">click <em>here</em></label>
using the label element's control attribute for cleaner, simpler, spec-base form field association.
I came up with a feasible workaround:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("label").click(function () {
$("#input").click();
});
});
</script>
<label for="input">Label</label><input type="file" id="input"/>
Quite strange that FF allows you to simulate a click on a file input. I thought that was considered a security risk...
UPDATE: This is a generic workaround:
<script type="text/javascript">
$(function () {
if ($.browser.mozilla) {
$("label").live("click", function (event) {
if (event.target == this) {
$("#" + $(this).attr("for")).extend($("input", this)).first().click();
}
});
}
});
</script>
A couple problems arise when using the jQuery browser detection, most notably the anti-pattern of using browser detection rather than feature detection, in addition to the fact that 1.9+ doesn't provide that functionality.
Perhaps, then, the solution I arrived at is a bit hypocritical, but it worked well and seems to adhere to most best practices today.
First, ensure you're using Paul Irish's conditional classes. Then, use something like:
if($("html").hasClass("ie")) {
$("label").click();
} else {
$("input").click();
}
Otherwise, I found the event would be double-fired in browsers such as Chrome. This solution seemed elegant enough.
The file-selection dialog can be triggered in all browsers by the click() event. An unobtrusive solution to this problem could look like that:
$('label')
.attr('for', null)
.click(function() {
$('#input').click();
});
Removing the for attribute is important since other browsers (e.g. Chrome, IE) will still ratify it and show the dialog twice.
I tested it in Chrome 25, Firefox 19 and IE 9 and works like a charm.
It seems to be fixed in FF 23, so browser detection becomes hazardous and leads to double system dialogs ;(
You can add another test to restrict the fix to FF version prior to version 23:
if(parseInt(navigator.buildID,10) < 20130714000000){
//DO THE FIX
}
It's quite ugly, but this fix will be removed as soon as old the version of FF will have disappeared.
A work around when you don't need/want to have the input box (like image upload) is to use opacity: 0 in the element and use pointer-events: none; in the label.
The solution is really design specific but maybe should work for someone who comes to this. (until now the bug doesn't been fixed)
http://codepen.io/octavioamu/pen/ByOQBE
you can dispatch the event from any event to the type=file input if you want
make the input display:none and visibility:hidden, and then dispatch the event from,
say, the click|touch of an image ...
<img id="customImg" src="file.ext"/>
<input id="fileLoader" type="file" style="display:none;visibility:hidden"/>
<script>
customImg.addEventListener(customImg.ontouchstart?'touchstart':'click', function(e){
var evt = document.createEvent('HTMLEvents');
evt.initEvent('click',false,true);
fileLoader.dispatchEvent(evt);
},false);
</script>
Using the answer of Corey above in a React environment I had to do the following:
(Firefox check is based on: How to detect Safari, Chrome, IE, Firefox and Opera browser?)
const ReactFileInputButton = ({ onClick }) => {
const isFirefox = typeof InstallTrigger !== 'undefined';
const handleClick = isFirefox ? (e) => {
e.currentTarget.control.click();
} : undefined;
const handleFileSelect = (e) => {
if (e.target.files && e.target.files[0]) {
onClick({ file: e.target.files[0] });
}
}
return (
<>
<input type="file" id="file" onChange={handleFileSelect} />
<label htmlFor="file" onClick={handleClick}>
Select file
</label>
</>
);
};
Reverse the order of the label and input elements. iow, put the label element after the input element.
Try this code
<img id="uploadPreview" style="width: 100px; height: 100px;"
onclick="document.getElementById('uploadImage').click(event);" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
};
};
</script>
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;
}