I am currently using this code to replace the placeholder functionality where it is not available. I have a click listener on jQuery which changes the placeholder text:
$('.contact-type').change(function(event) {
$contactInfo = $(this).closest('div').prev().find('#contact-info');
$contactInfo.removeClass();
$contactInfo.addClass('form-control input-lg');
$contactInfo.addClass('validate[required,custom[line]]');
$contactInfo.attr("placeholder", "LINE ID");
})
The issue is that when using the jquery placeholder, when I changed the placeholder text and then I called $('input, textarea').placeholder();. The new placeholder doesn't change. How can I also change the placeholder when the value changed?
Check if your version of opera is here:
CLICK ME :)
It may just not work, because developers didn't code it. ;)
there's a whole slew of placeholders that you could check and see if it could work for opera:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-forms--input-placeholder
Modernizr is a very nice tool that is useful for checking backwards compatibility of html5 on older browsers.
Did more digging and apparently this site gives opera mini consideration in adding placeholders (though I haven't tested it myself since I don't have opera mini installed on my computer):
http://www.mightyminnow.com/2013/09/mightyminnow-plugin-html5-jquery-polyfill/
Give that a go too. I know it can be frustrating, I had to do tons of tweaks on a recent project just to support ie7 stuff.
Opera-mini doesn't support placeholder attribute for HTML input.
You can check whether Opera-Mini supports something or not in the website Mr.TK pointed out: http://caniuse.com/input-placeholder.
Related
Safari 10.0 in macOS Sierra seems to have changed the way the placeholder in an input behaves when the input value is changed via JavaScript. It now also differs from what Chrome (53.0.2785.116) is doing.
Until now, when setting an input value via JavaScript the placeholder would disappear. After setting the value back to empty via JavaScript, the placeholder would reappear.
Now, setting the input value via JavaScript does not hide the placeholder, until the input gains focus afterwards (e.g. by being clicked on).
Check this JS Bin for a demo: https://jsbin.com/rogoludahu/edit?html,js,output
Is this the intended behavior? If so, is there a clever workaround for hiding/unhiding the placeholder after a change via JavaScript?
Edit: This has now been filed at rdar://28412751 for Safari 10 and the Safari Technology Preview.
I ran into this problem earlier today. As far as I've seen, there is no good solution. My hacky workaround was to call .focus() and then .blur() on the element as soon as the value was given to it.
This has been resolved in Safari Technology Preview Release 37 (Safari 11.1, WebKit 12605.1.2) as well as in regular Safari Version 11.0.3 (WebKit 13604.5.6).
According to this Apple thread (and confirmed by one of my coworkers), this is only an issue if you've opened the Javascript console. So, you probably don't need to worry about a workaround!
I don't know if the bug returned or was never fixed properly (Safari 11.0.3). Can be reproducible with the jsbin from Joshua. The solution for us was to redraw the field on change. We are using ExtJS so this is a snipped for the field override, but should be able to apply it in any other framework or vanila.
if(Ext.isSafari && !Ext.isEmpty(me.emptyText)) {
me.on('change', function() {
var me = this;
if(me.rendered && me.el && Ext.isFunction(me.el.redraw)) {
me.el.redraw()
}
})
}
I am making an angular app but I have found an instance where I need to use jQuery. I need to click a button which raises a click event on another hidden button. I know this seems odd but I need this functionality because an angular module I am using, ng-file-upload, will not work on styled icons.
My solution was to create two buttons, one hidden, one transparent. I then put the styled icon on the transparent button and made the other button hidden. I then used jQuery to cause the second button to be clicked when the first is clicked. This works fine in modern firefox/chrome but not at all in IE8.
<button id="firstClick" class="fa fa-camera-retro"></button>
<button ng-hide="true" id="secondClick" ng-file-select ng-model="files">Upload</button>
$(document).on('click', '#firstClick', function() {
$('#secondClick').trigger('click');
});
I am currently using jQuery version 1.10.2. Any help with this or alternative ways to achieve this would be greatly appreciated. Thanks in advance!
UPDATE:
I think the problem may have to do with angular-file-select as the secondClick is now firing. However angular-file-select is not. Also I set secondClick to visible and when I click it directly it fires ng-file-select.
As you have not mentioned the angular version of your app is using. But if you are using angular 1.3.x then you have to know that it does not support IE8 browser anymore.
docs for IE guide.
There is a note:
Note: AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.
As per your comment:
every other part of the site is 100% percent angular, and works perfectly. It is just this one situation where I could not think of an angular solution.
Then i want to suggest you that angular does have a lite version of jQuery in it, called jqLite. You can make use of it, like:
angular.element('#firstClick').on('click', function() {
angular.element('#secondClick').trigger('click');
});
Docs for angular.element
Change the jquery version to lower. By seeing this thread i think version 1.10.2 is not support for ie8. i also tried in jsfiddle and test in ie8 there isissues. when i change to change the version it's working Fiddle
$('#secondClick').click();
Edit: You can forward mouse events through elements with good browser support using: http://www.vinylfox.com/forwarding-mouse-events-through-layers/
If you're fortunate enough to not have to work with older browsers then you can get away the pointer-events CSS property.
#firstClick {
pointer-events: none;
}
Placeholders has always been an issue in IE8 or IE9. As a workaround for this,
I used jQuery plugin that enables placeholder to browsers who does not support this. Since my jQuery is 1.5, I used v1.8.7 of that plugin because $.valHooks is undefined. But what happened is that it seemed didn't work since my placeholders doesn't behave properly in IE8/IE9.
I have already included the jQuery.placeholder.js in my project and since it was stated there that to invoke this is you use this, $('input, textarea').placeholder();. Still i did not work. Are there other ways needed to do before using the plugin.
My placeholder issues are during submission of form and also when replacing the placeholder of 1 textbox.
Your help is greatly appreciated. ;)
You could try using http://modernizr.com
It's a plugin which detects features the user's browser supports. If it's not supported, a jQuery plugin makes it happen!
I have created a little tooltip framework, which works fine in all modern browsers. There's one thing that really bugs me: in Firefox this seems to disable displaying a regular title (from the title attribute).
I can't find a cause for this. It's not the mouseover handler that I assign for certain elements, because on regular (non handled) elements, titles are not displayed either. Furthermore, I experimented with this (see this JSFiddle, and it was not replicable).
Can this be some known Firefox bug (I searched the Internet for that, but I didn't find anything relevant) or am I doing something wrong in my scripting, HTML, or CSS?
I've put the whole thing in this JSFiddle.
[edit april 2022] This is a very old question. Do disregard it.
title is displayed in my Firefox, and Firefox doesn’t have any bug regarding the same. Try updating your Firefox, or maybe some plugin in your browser may be causing the tooltip to hide.
I am looking at the custom attributes feature of html 5 here at this link
http://ejohn.org/blog/html-5-data-attributes/
This look like the perfect thing for when I am using jquery/javascript.
My question, Is HTML 5 supported by all the main browsers?
example
<li class="user" data-name="John Resig" data-city="Boston"
data-lang="js" data-food="Bacon">
<b>John says:</b> <span>Hello, how are you?</span>
</li>
Various portions of HTML5 are supported by the different browsers, for various definitions of 'supported'.
Several parts work right now, reliably. The data-* attributes you ask about in your question work just fine in every browser, even IE6; however, nobody yet supports the fun "dataset" method to access them. As long as you're fine with just grabbing them by the full attr name, you're golden. I use them to store state all the time in my webapps, as they're the officially blessed method for doing so.
Wikipedia has a good summary of the various support levels across browsers: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
Parts of HTML 5 are supported by Safari, Firefox and Opera, but they are not necessarily incorporating the same parts.
It seems that Firefox is the most ahead, from my experience, but it will be years before the majority of browsers users use will support it.
So, until then we will need to continue trying to use it when we can, in browsers that support the new features, and having workarounds for users that haven't updated yet, or continue to use IE.
Use some services like
http://caniuse.com/
For example for your question - http://caniuse.com/dataset
As you can see all modern browsers support it
Also you can use something like http://modernizr.com/ in your code (it's already included in http://html5boilerplate.com/)
PS: just notified that this question is too old, but it was linked to some other question i checked before
No.
The Wikipedia page "Comparison of layout engines (HTML 5)" does a good job of listing which engines have implemented which parts of HTML5.
There is currently a lot of red boxes on those tables, and that is based on the latest development version, not the version most users will be using.
Full support of HTML 5 is a way off BUT...
Creating custom attributes is nothing new and is likely to work in all the main browsers - but test to be sure that it will work in your case.
We can use HTML 5 now, just not all of it. A lot of HTML 5 is about formalising the way that HTML is currently used and ensuring backwards compatibility - so if a feature works in browsers now, use it.
Almost no web technology is completely supported by any browser; no bugs, quirks or issues.
HTML5 is designed for backwards compatibility, and it will hardly break your site (take <input type=url> for instance - non-supporting browsers show an ordinary text box, Opera lets you select an URL from history/bookmarks). I'd go by the approach: develop, try in the browsers you need to support - if it works, awesome. If not, don't use it. Just like with other specs.
HTML5 isn't even close to being completely supported on any browser yet, and some browsers (notably the IE's) have no intention of supporting it at this time.
no, not yet. wait at least until gecko and webkit support it.
ps: you could use html 5 with data attributes anyway, if you need it for javascript purposes. or choose some other unused attributes (title, abbr, ...others?)
As of August 25, HTML 5 is still a working draft.
http://dev.w3.org/html5/spec/Overview.html