I am using tinyMCE4 in one of my projects and want to add custom methods on different events the editor instance of tinyMCE provides. I am trying to usw the focus and blur events as follows.
setup: function(editor) {
editor.on("focus", function(event) {
// Do something when editor is focused.
});
editor.on("blur", function(event) {
// Do something when editor is blurred.
});
}
The focus event works absolutely fine but the blurevent is not triggered when tinyMCE loses focus, but is triggered when it gets focused. why is this so ? is this a bug ?
Here is a jsfiddle displaying the above issue. Click on the launch button and then click on the textarea. blur event is triggered on focus and not triggered on blur.
Related
I have a questionnaire with buttons that show a tooltip on mouse hover and select on mouse click.
On mobile devices, ToolTip captures the first click to show the tool tip (equivalent of "hover" on computer) and the second click is used for button selection (equivalent of "click" on computer).
Now my question: how, on a mobile device, can I use the first click to both show the tooltip AND select the button ?
Is there a way I can e.g. propagate the event to make it act like on a computer ?
Or intercept the first event and trigger another event ?
Or should I act at the level of the button by catching the event and manually trigger tooltip showing ? (in which case I'll also need to figure out how to hide the tooltip when a button from another question is clicked).
Or perhaps JQuery-UI ToolTip is not adapted to my needs?
Thanks ahead for your views
LA
Finally I found an acceptable solution by manually hooking a click event to the buttons as follows:
$(".questionnaire_button").click(function () {
$(this).tooltip({
position: { my: "left+15 center", at: "center+20 center" }
});
$(this).tooltip("open");
})
I am using jQuery UI buttonset for an on/off pair of buttons, mainly because of the nice styling you get with it. I want to handle clicks so that when you click one of the two buttons you get a dialog where you can make some more choices, and after that the page reloads with the buttons in their new state (if the state was changed, which may not be the case).
The problem is that the button that you click gets styled as selected before any click handlers are called, it seems. I don't want the selection to change, I want to do that manually.
It seems that the click event is bound to the label that jQuery UI creates, and I'm struggling a bit with unbinding it. I guess I'm also asking if there is some other way to get the style without the function... since buttonset doesn't offer any event handlers I need to catch the click events myself anyway.
The solution I'm thinking of right now is simply copying the html that buttonset generates into my code, keep the css and remove the buttonset call. I thought it might worth it to check on StackOverflow before giving up though. :)
Since jQuery UI doesn't trigger any events that run before for the actual selection is made the workarounds to accomplish this are going to be relatively hacky. The best idea I could come up with is to programmatically remember the previously selected option and then attach a click handler that determines whether you should revert jQuery UI's selection of the new button or not.
$('#parent_container').buttonset();
var selectedButton = $('#parent_container :checked');
$('.ui-button').on('click', function() {
setTimeout(function() {
//Insert your actual check here.
if (true) {
selectedButton.attr('checked', true);
$('#radio').buttonset('refresh');
} else {
selectedButton = $('#parent_container :checked');
}
}, 1);
});
The setTimeout is necessary to ensure that this runs after jQuery UI's click handler. Since you're showing a dialog you might need to alter this to instantly revert the selection, but remember what the user attempted to select for future use.
I have an example of always refusing the user's selection here - http://jsfiddle.net/tj_vantoll/s6XTu/14/
Obviously this is not an ideal approach but it does work. jQuery UI should really add support for selection events; I'll try to get around to filing a ticket for this. The button plugin is due for some updates in 1.11 - http://wiki.jqueryui.com/w/page/12138038/Roadmap.
I'm using iOS 5.0.1, and Sencha Touch 2-rc1. I have a search input field where the focus event is getting triggered, as well as the submit event when I press 'Search' on the on-screen keyboard. The blur event doesn't get triggered when I expect it to, which would be when the 'Done' key is pressed, or the viewable area is tapped.
Note that the blur event IS getting triggered on my laptop in Chrome.
Not every element is focusable. At least <div> is not.
onblur is not firing because when a user taps on a div element, the focus doesn't go to the <div>.
Based on this post:
http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex
tabindex on the correct div element can make a div focusable.
This is likely to be related to the event not "bubbling" up through the DOM. Or perhaps the code you've used includes an event.preventDefault(), but that would have killed more than just blur. I've also had this issue with clicking away from items which appear via javascript.
http://www.quirksmode.org/dom/events/blurfocus.html
I have a textarea element inside of a jquery modal dialog that has an attached blur handler. The blur handler code is triggered correctly in Chrome and Internet Explorer when the click of the button on the dialog, which calls $('#mydialog).dialog('destroy').remove(); occurs.
Unfortunately, in Firefox this is not happening!
Why might this be?
I was able to eventually resolve the issue by utilizing setTimeout to wrap the click handler code in, which allowed enough time for the blur event on the textarea to fire properly.
The resulting code was as follows:
var c = $('#mydialog');
setTimeout(function() {c.dialog('destroy').remove();}, 1);
As it turns out so far, a 1ms timeout is just enough to force the appropriate context switch in the browser to allow for the blur event to occur before the element is removed from the DOM.
In iPad Safari, I have programmed a DIV's touch-events so that when you touch inside the DIV and hold your finger there for 500 ms, the DIV's background color changes.
When I try to move the code over to a text-input element (inside a fieldset), making it the touch-target instead of the DIV, the code doesn't work. The text-input becomes selected in spite of this CSS:
input[type=text] {-webkit-touch-callout:none; -webkit-user-select:none }
Is there no way to intercept the touch events of a text-input element in iPad Safari and handle them in a custom manner, preventing default behavior? Or is there something additional that I must do to get the input to support this? I've tried with and without a dummy click handler: onclick="void(0)".
This is the doc I'm following the documentation Handling Events.
It would be helpful if you posted your code, but I'm thinking you probably just need to prevent the default behavior on touch events. This looks something like this if using jQuery:
$("#ID")
.bind("touchstart",
function (e) {
e.preventDefault();
//do something
})
.bind("touchmove",
function (e) {
if (e.preventDefault) {
e.preventDefault();
}
//do something
});
If you don't call preventDefault() in your handler code, the browser will automatically pass the touch event through to the default implementation (after you think you've handled it). The default implementation is to select the field.
So, in your case, call preventDefault() and stopPropagation() in your handler, and return false. This prevents the event from bubbling further. Then you can totally control your input element.
Caveat: You'll then also lose the default behavior of the input field! In other words, you'll not be able to input text into the field! Or if the input field is a <select>, you won't be able to pull up the list etc.
I suppose what you really want is: 1) If user presses and hold for 500ms, then turn yellow, 2) and/or on release activate the input field. In that case, you'll have to manually refire the event upwards when you really want to use the input field.
This kind of situation is very common when programming the iPad. For example, in many cases you'd want to detect a touch-drag motion (even on an input field) and interpret it as a move, but interpret a touch-release motion (without moving) as a click to activate the input field. You have to do what I suggest above: preventDefault() and refire event when necessary.
Try to disable and make your input readonly:
<input type="text" readonly />