I have a simple datepicker I'm using on a couple of date inputs. Here's the code:
$('input.isDate').datepicker({
numberOfMonths: 1,
onSelect: function () {
$(this).removeClass('placeholder'); //default is to keep placeholder style format
},
onClose: function () {
$(this).focus(); //otherwise focus goes to neverneverland
}
});
Datepicker shows on focus. The two .isDate inputs have a placeholder value of "Date".
The problem arises if the user presses the escape key when in the datepicker. The intended behavior of this is to close the datepicker and restore whatever text was in the box at point of entry. In my case the input box's value becomes the placeholder value. Leaving the box at this point leaves the word "Date" in the box as a hard value rather than as a placeholder prompt, so it trips some field-level date validation that I have.
I've been able to deal with that by blanking the text value when the user leaves the box, but the user oughtn't to have to erase that text when he escapes out of the datepicker to enter a date manually. I've made numerous attempts to use events to get rid of this, and none of them work: I've tried focusin, trapping esc in keypress, and the create, beforeDisplay, onSelect and onClose events of the datepicker itself. In all these cases, the value of the box was still "". Clearly, the datepicker sets the value of the box after finishing all of its business, and I'm thinking that placeholder wasn't taken into account in this design. Possibly a bug? We're using the Whitelabel skin, so maybe they are interfering with the datepicker in some way? Anyway, I'd much appreciate a workaround or an explanation. I haven't been able to find much of either.
TIA
Without knowing more about your application, I think you'd be better off using a good label and leaving the input blank. There is also an actual placeholder feature in "HTML5".
Related
With Plain Text views I am able to do that by writing this code in on input event -
if (potential.trim() == "") {
${Button3}.setEnabled(false);
}
else{
${Button3}.setEnabled(true);
}
I don't know what potential means here in BPM but this works for Plain Text Views.
However when I try on change event in Decimal View Text field this doesn't work.
In html inspector console I see -
Potential reference not found.
Is there any Potential like thing available for Decimal Views also?
Judging by the documentation and looking at in on an 8.6 version it seems like 'potential' is an additional parameter available to the Plain Text control.
With that in mind, I don't think there is an equivalent for the Decimal view as it doesn't have an "On input" event available. You could, however, get something close to the same behavior using the "On Change" or "On blur" events of the Decimal view to check the binding value. If it's been set to null you could disable the button.
While that doesn't meet your exact requirement of immediate feedback, it does appear to work quickly enough that even if the user attempts to click the button without "committing" change to the Decimal input (meaning the cursor is still in the Decimal input field and they haven't pressed return) that the change and visibility settings happen first so the button won't execute.
The datepicker is managed by knockout-jqueryui in a Durandal view presented as a modal dialog. The calendar pops up when the corresponding INPUT is focussed, and hides when it is blurred. Data-binding works fine.
But when the user selects a value, the calendar closes, the INPUT updates and the calendar re-displays. It works, but it's annoying my users because they are mouse obsessed and the calendar obscures the control below, making it hard to click on it. Yes, I know they could press tab. I have pointed this out.
How can I stop the re-display? Ideally, triggers for display would be focus and keydown. I have no problem with configuring it to manual control and switching with data-bind="change: showCalendar, ..." or similar, if that's how one does this.
So, what's the usual way to go about this? If it's manual control as I describe above, what are some keywords to expedite finding the relevant section(s) in the documentation? (How to set it to manual and how to hide/show it manually.)
(I found show() and hide())
The showOn option for jQuery UI Datepicker is passed through by knockout-jqueryui.
It defines only two values, 'focus' and 'button'.
There is no explicitly defined mechanism to disable auto-display, but I found that a value other than the defined values has the desired effect. I am passing 'click'.
Manual control methods are show and hide.
I display two dates in a input-field. When the user clicks on a valid date, mobiscroll should display the date and allow it to be changed.
When the user sets the cursor outside one of the dates (by clicking just before or after one of the dates), the input field should work as expected, allowing the user to change the date in-place or typing something.
Mobiscroll is initialized with:
$('#input').mobiscroll().date({
showOnTap: false,
showOnFocus: false
});
and then invoked with
$('#input').mobiscroll('setDate', theClickedDate, false);
$('#input').mobiscroll('option', {onSelect: dateChanged});
$('#input').mobiscroll('show');
when the "circumstances" are right (i.e. a valid date clicked).
This works when a date is clicked, mobiscroll is displayed with the date. But a click "outside" one of the dates does not set the cursor to allow editing. The input acts like it is 'readonly'.
Pasted from Mobiscroll support team:
Mobiscroll sets the input field to readonly, because otherwise, when it receives focus, the virtual keyboard will also pop up.
I think the best solution would be to not initialize mobiscroll on the input field (as you are not using the show and fill functionality anyway), you can initialize it on an empty div.
If you use bubble positioning, you should also pass the input element in the anchor setting:
$('#mydiv').mobiscroll().date({
display: 'bubble',
anchor: $('#input')
});
$('#mydiv').mobiscroll('setDate', theClickedDate, false);
$('#mydiv').mobiscroll('option', {onSelect: dateChanged});
$('#mydiv').mobiscroll('show');
Is there a simple way to have a default text in the textbox using jQueryUI's autocomplete ?
I have tried using data-placeholder but it doesn't seem to work.
I have searched online, and people suggest using the textbox value to display the text, and clear it on focus. But then I would need to change the font style just for the default text, and check onKeyUp when the text is manually erased etc...
Is there no easier way to do this ? or am I missing something ?
A lot of people will use a span that is positioned to be over the text box. When the text box gets focus then you hide the span. When the text box blurs and has a value, you don't show it. If it doesn't have a value then you can show it again.
You can style the span however you want independently of the text box so you would not have to change the font style on the text box itself. You would have to subscribe to the focus and blur events, but it would be much easier if you created a jQuery plugin to do this. In fact, I'm sure there are ones that already exist that do this.
iOS5+ shows next/prev buttons above the keyboard:
Because they change the focused element on the page, they can cause issues with my single page app's layout. The 'tab' key on normal keyboards can cause similar issues, but I can slightly change its functionality to only cycle around the inputs I want with a custom keydown event.
Is there any way to do something similar for those buttons?
I'm not really sure what your problem is.
My guess is that when you change focus with "Previous" and "next" button, something goes wrong with your design. And I'm also guessing that you click these when you are in an input (although it's pretty obvious).
When you change from an input to another (With tab key, using "previous/next"-buttons or by mouse), a blur event is triggered.
Now, you don't say what library, if any, you are using. But the fix is similar all around I would say.
if you use jQuery, do something similar to this:
//Selects all input elements, and binds a anonymous function to them. This function
//is run when the blur event is triggered, meaning when we change focus to something else
$("input").on("blur", function () { //Or live, depending on jQuery version
//Your code here, that I assume you already have
});