Develop Reference

Opening a v-date-picker v-menu on click and focusing a v-text-field inside it?

I've got a date-picker component in an app and used the example for a menu to open it.
I now want to make it more efficient to use for desktop users, so I removed the readonly flag to make manual input possible.
Now desktop users can simply tab through the different fields of the form to quickly input dates and times. The problem here was that the date-picker would not show up when a user tabs into a field, which was easily fixed with adding #focus="menuVariable=true" to the text-field.
But the problem now is that the date-picker won't show up anymore when a user first clicks into the text-field, at least not consistently, which I haven't been able to fix. I already tried to listen for click events and setting the menu's toggle to true then, but I guess the problem is setting that variable in the first place. Not sure how to work around this or how to open that menu manually any other way.
Here is a codepen showing off the problem. Click around a bit between the two fields, the date-picker on the right always opens, the one on the left only occasionally.
Does anyone know a better solution to consistently show the date-picker when a user either clicks into the text-field (or any other part of the v-menu) or tabs into the text-field?

#keyup="menuVariable=true"
#keydown="menuVariable=false"
I worked with this.

there is a nice solution here:
https://codepen.io/Phennim/pen/KKPYGRK
v-on:focus="onFocus"
v-on:blur="onBlur"
Hope it helps you

JQuery Datepicker: how to deny it using my css

I have a Javascript JQuery datepicker attached to 2 text fields.
In Chrome, this works perfectly. In IE9, whenever I click on the text fields, the calendar field opens BUT when I want to select a date, the control flickers because the hover effect does inherit from some CSS.
I want to know if there's a way for me to deny the control to be using my css (such as or ) and just revert to the base browser visual style.
This way, I can start building it up from scratch and test where the flickering occurs.

Does this help?
pointer-events: auto | none

force safari iOS select component to update when options change

When you tap on a select input on a web page using iOS (iPhone), a spinner widget (the "picker") pops up and lets you spin through and select options within that select. Let's say you've tapped into one of these and the selector widget is open. While this is open, if you use javascript to modify the select options (add, remove, update options via the dom), then these changes don't get reflected in the widget unless the user closes and reopens the widget.
Is there a way to force the browser to update the options automatically?
Edit: Here is an example you can use to observe how updating select options doesn't update the selector widget: http://jsfiddle.net/RrsNk/
<select id="my-select" />
$(function () {
updateSelect();
});
function updateSelect() {
$("#my-select").empty();
for (i = 0; i < 5; i++) {
var ran = Math.random();
$("<option />").attr("value", ran).html(ran).appendTo("#my-select");
}
setTimeout(updateSelect, 2000);
}

Safari uses a UIPickerView to display the dropdown menus. As you would expect, the title of the dropdown component in the page is updated according to the changes in the DOM but the picker view is not tightly coupled with the DOM so it isn't updated. The situation is the same with Chrome and Opera Mini.
So in conclusion, it is not possible what you are trying to implement. You should look for other ways to make your dataset accessible.

I was brought to this question as the closest to my usage case, which is similar but not identical, and might apply to other people as it is a common situation. I found the answers here a touch confusing, so just wanted to clarify my findings.
I start with a dropdown containing just one option: Searching....
When the user clicks, the "picker" pops up (a "tick-list" on iPad, same principle as the "spinner" on iPhone), showing Searching....
An AJAX call gets come choices from the server, and JavaScript updates the options[] to these.
At this point, the picker still shows just Searching..., and the user has no clue that it has been repopulated. The user must click outside to dismiss the "picker", and click the dropdown again to see the new choices.
So in my case I do not have OP's situation of wanting a second dropdown to be displayed depending on what option is selected in the first dropdown. Rather I would like (#1) the "picker" disappear, and then (#2) reappear (with the new choices).
Now, it seems you can do #1, but not #2.
You can dismiss the "picker" by dropdown.blur() (tested in Mobile Safari). See Close a SELECT dropdown list programatically with Javascript/jQuery.
You cannot cause the "picker" to pop up again (at least not in Mobile Safari). See How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?.
So I am at least doing #1, so that the user gets some feedback rather than just being stuck with Searching....
If anyone can state how you can do #2 on Mobile Safari I would be very interested to hear....

Worth trying: populate a second <select> element, and .focus() to it when the item in the first select list is chosen.
Note that iOS only allows a control to be focused within a user interactive events (touchend or click event) so I am guessing Safari Mobile might allow .focus() to work within a <select> (to opening the second select list).
Might not work, since an onchange event of a select list might not be deemed "interactive" or Safari Mobile might otherwise disallow selectElement.focus() to work for some reason.
Edit: I think this shows it is unlikely to work: force safari iOS select component to update when options change
Don't bother trying if you need to contact a server to fill the list. That is because when you get the response event, you are definitely not in a user interactive tap/click event handler, so .focus() is sure to be ignored (although there is a very slight chance an async chain could work).

Firstly, why would you want to - you should adjust the values in your HTML file, or with JavaScript as the page is loading.
However, if the values are changing as the user selects the dropdown, you can use JavaScript to select another element, then reselect the dropdown, causing it to reload.
You can bring focus to an element with the focus() method. Eg.
Document.getElementById("input").focus();

IE javascript / jquery issue

I am trying to get these 2 select drop downs to work which basically rely on each other for out of stock. The idea is that out of stock combination would be disabled from the user selection. This works fine in all browsers except IE.
I found a script for IE which basically adds disabled class and does an alert pop up and then resets the select dropdown.
Here is a demo: http://jsbin.com/osipe5/2
In that, please select size as 1X. As you can see everything works perfectly. We are good. Now select size 2X. In the color dropdown "White" has the disabled class. That is not correct. The issue is somewhere with ieLessThan8OptionDisable()
Any help is much appreciated.
Thanks

I'm guessing the problem is this line in ieLessThan8OptionDisable():
this.blur();
Change it to $(this).blur();. But seriously, please stop writing browser-specific code with jQuery.
Since you're running into a common IE pre-8 bug, you might want to see this question.

Facebook like login form

I've already asked question similar to this some time ago, I thought I solved my problem but now it appears I didn't. Dealing with this problem for some time now and I have absolutely no idea how to do it.
The answer I got from previous question works but when I resize the window the password label drifts away when you re-size the window. And it doesn't position all the same in the FF(3.0.5) but it does in FF(3.5.6) and IE7, but again all have the same problems when window is re-sized.
What I'm trying to do is to put label behind input and by doing so it appears that input has 'Password' value. Does anybody know how did the facebook solve that problem?
www.facebook.com look at the login form, the password field .. when you click on it the password disappears and you type your password in.
Another useful link I got for this is http://dorward.me.uk/tmp/label-work/example.html from David Dorward, but he uses jquery and I'm allowed to use either only prototype or pure javascript. Can I get any help/comments/hints/tricks I've been dealing with this for some time now I'm just out of ideas.
Thank you

That technique is called watermark and on the internet there are some plugins for the js frameworks and tutorials to do it with pure javascript.
I think that Facebook is using a little workaround to show a watermark with clear text on a password field: the real password field is hidden and you're showed a text field with the password hint. When you click on the field the placeholder element is removed from the dom and the real password field is showed.

The problem here is not the JavaScript (so the use of a library in the example doesn't matter).
It is basic CSS positioning.
You need to establish a containing block to position the label and the input inside. That way, all the positioning is with respect to that block, and it doesn't matter about the position of everything else on the page.
Set position: relative on an element to establish this. The example does there here:
body.js .slim-control {
position: relative;
height: 1em;
}

Consider using CSS background images for this. Create two (transparent) background images with the desired text and define it in a class. Display it by default on empty fields. Use the JS focus event to remove the class associated with the image and use the JS blur event to check if there is no value and add the class associated with the image.