I would like to block the user from exiting the modal on clicking outside or pressing ESC when an input has been changed, my attempt being:
$("#cadastroModal input, #cadastroModal textarea, #cadastroModal select").on('change input select select2:select', function() {
$('#cadastroModal').attr('data-backdrop', 'static');
$('#cadastroModal').attr('data-keyboard', false);
});
And while the element does change in runtime (as checked with chrome inspect element), it seems like it doesn't respect the data attributes if its already open. How can I fix this?
Apparently you need to use _config as shown here
This worked:
$('#cadastroModal').data('bs.modal')._config.backdrop = 'static';
$('#cadastroModal').data('bs.modal')._config.keyboard = false;
Related
I'm facing some issue setting focus on the editor when navigating with TAB.
If my div doesn't have tabindex to set, and just click into it, the code below is working well, I can see the two console.log, init and focus, and the toolbar appears properly :
setup: function(editor) {
editor.on("init", function() {
console.log('init');
editor.focus();
});
editor.on("focus", function() {
console.log('focus');
});
}
But when I set a tabindex on the div, and TAB into it, I can only see the "init" one. The cursor is in place receiving text but there's no toolbar.
I have to TAB out and then TAB in again, to see this time the "focus" one and the toolbar.
Does anyone have some help ?
PS: The tab_focus plugin don't fit my needs because there can be several editors in the page and they aren't init on page load but on click, and now i'm trying to figure out how I can turn that click action onto a focus by TAB one.
I solved this issues this way :
editor.on("init", function() {
$(focusElement).blur();
$(focusElement).focus();
});
Because the original
editor.on("init", function() {
editor.focus();
});
don't work with TAB naigation I had to do this trick to fake the thing that I had to TAB out and then TAB in again to trigger the focus event.
I'd like a user to be able to use the escape key to abort any changes in a tinyMCE editor in inline mode. Here's the HTML:
<div id="tinymce">
<p>Foo Foo Foo</p>
</div>
And the script:
tinymce.init({
selector: '#tinymce',
inline: true,
setup: function (editor) {
editor.on('keydown', ((e) => {
var tinyMceEditor = tinyMCE.get(e.target.id);
if (e.keyCode === 27) { // escape
// This will hide the editor but it won't come back when trying to re-edit
tinyMceEditor.hide();
}
}));
}
});
It's also a jsfiddle: http://jsfiddle.net/kfnyqufm/
Hitting escape closes the editor like I want but has two issues: (1) the editor doesn't return when clicking the text (2) any edited text doesn't revert to the original value
(1) the editor doesn't return when clicking the text
This happens because you are hiding the editor completely when esc is pressed, and not showing it again. You have (at least) two options to solve this:
Show the editor when the #tinymce div gets focus again; or
Trigger the blur() method on the #tinymce when esc is pressed (that will automatically hide the editor, and it will come back on click again)
If you go with the second option (I think it would be simpler), the code would be like this (only the part related to the escape button):
if (e.keyCode === 27) { // escape
document.getElementById("tinymce").blur();
}
You can also see it on this version of your JSFiddle.
(2) any edited text doesn't revert to the original value
This is a bit trickier (but still simple) as you'll need to keep track of the old value and restore if esc is pressed. The logic for this would be:
When the #tinymce div gets focus: save the inner HTML into a JavaScript variable (or in the localStorage or sessionStorage).
When the escape key is pressed: restore the saved value as the inner HTML of #tinymce.
The code would be something like this for storing the old value:
// define a variable to store the old value
var old_value = "";
// save the old value when #tinymce gets focus
document.getElementById("tinymce").addEventListener("focus", function() {
old_value = document.getElementById("tinymce").innerHTML;
}, false);
And then you'd need to also restore the old value when esc is pressed:
if (e.keyCode === 27) { // escape
// blur the tinymce div and restore the old value
document.getElementById("tinymce").blur();
document.getElementById("tinymce").innerHTML = old_value;
}
You can see it fully working on this version of your JSFiddle.
I'm making a chrome extension, and I made a context menu option.
I want to get the focused input field and change it's text.
That's what I have so far:
function click()
{
var $focused = $(':focus');
$focused.val("test");
}
chrome.contextMenus.create({"title": "Paste", "contexts":["editable"], "onclick" : click});
But it doesn't change the input field's text, what do I need?
I added an alert("test"); to the click() function and it worked.
It is likely that focus is simply being stolen by the plugin button you click :)
Can you try setting a specific field value, using an ID or name select, to check your DOM access? Once you confirm that I suggest you use another event such as
$(document).on('focus', 'input', function(e){
// set field here
$(this).val("test");
});
to catch focus changes.
I have following jquery code, where on click of a check box I will show a popup value.
Except in IE,in all other browser it works as expected. That is, on change the check box will be checked and the popup will be opened.
However in IE8 its not getting checked, however popup is displayed properly.
Code :
$('#TAndC').change(function(){
if( $('input[name="TAndC"]').is(':checked'))
{
$('#TandCBox').show();
var termsandcondition = GetEnum().TermsandConditionsPageId;
var actionURL = '#Url.Action("ShowTAndC", "Account", new { isFromCheckBox = true })';
$('.popUpForm').load(actionURL);
var msgBox = $('#terms').attr('href');
MaskMsgPopUp(msgBox);
return false;
}
});
If your element is a checkbox and not a dropdown then use click anyway.
If your selector is referring to a dropdown use click if you need to support IE8 and older.
See why that is below.
According to the MSDN for change/onchange, the event is not triggered until the change is committed.
In addition the event is also not triggered when the value is changed programmatically.
To quote:
This event is fired when the contents are committed and not while the
value is changing. For example, on a text box, this event is not fired
while the user is typing, but rather when the user commits the change
by leaving the text box that has focus. In addition, this event is
executed before the code specified by onblur when the control is also
losing the focus. The onchange event does not fire when the selected
option of the select object is changed programmatically. Changed text
selection is committed.
To invoke this event, do one of the following:
Choose a different option in a select object using mouse or keyboard navigation.
Alter text in the text area and then navigate out of the object.
If you must support IE8 and older, you are probably better of to use the click event instead which get's triggered when you release the mouse and your new choice is selected.
instead of .change use below code and try
$(document).ready(function(){
$(document).on('click','#TAndC',click_function){
if( $('input[name="TAndC"]').is(':checked'))
{
$('#TandCBox').show();
var termsandcondition = GetEnum().TermsandConditionsPageId;
var actionURL = '#Url.Action("ShowTAndC", "Account", new { isFromCheckBox = true })';
$('.popUpForm').load(actionURL);
var msgBox = $('#terms').attr('href');
MaskMsgPopUp(msgBox);
return false;
}
});
});
I am using jQuery 1.3.2.
There is an input field in a form.
Clicking on the input field opens a div as a dropdown. The div contains a list of items. As the list size is large there is a vertical scrollbar in the div.
To close the dropdown when clicked outside, there is a blur event on the input field.
Now the problem is:
In chrome(2.0.172) when we click on the scrollbar, the input field will loose focus.
And now if you click outside, then the dropdown won't close(as the input has already lost focus when you clicked on the srollbar)
In Firefox(3.5), IE(8), opera(9.64), safari() when we click on the scrollbar the input field will not loose focus. Hence when you click outside (after clicking on the srollbar) the dropdown will close. This is the expected behaviour.
So In chrome once the scrollbar is clicked, and then if I click outside the dropdown won't close.
How can i fix this issue with chrome.
Well, I had the same problem in my dropdown control. I've asked Chrome developers concerning this issue, they said it's a bug that is not going to be fixed in the nearest future because of "it has not been reported by many people and the fix is not trivial". So, let's face the truth: this bug will stay for another year at least.
Though, for this particular case (dropdown) there is a workaround. The trick is: when one click on a scrollbar the "mouse down" event comes to the owner element of that scrollbar. We can use this fact to set a flag and check it in "onblur" handler. Here the explanation:
<input id="search_ctrl">
<div id="dropdown_wrap" style="overflow:auto;max-height:30px">
<div id="dropdown_rows">
<span>row 1</span>
<span>row 2</span>
<span>row 2</span>
</div>
</div>
"dropdown_wrap" div will get a vertical scrollbar since its content doesn't fit fixed height. Once we get the click we are pretty sure that scrollbar was clicked and focus is going to be taken off. Now some code how to handle this:
search_ctrl.onfocus = function() {
search_has_focus = true
}
search_ctrl.onblur = function() {
search_has_focus = false
if (!keep_focus) {
// hide dropdown
} else {
keep_focus = false;
search_ctrl.focus();
}
}
dropdow_wrap.onclick = function() {
if (isChrome()) {
keep_focus = search_has_focus;
}
}
That's it. We don't need any hacks for FF so there is a check for browser. In Chrome we detect click on scrollbar, allow bluring focus without closing the list and then immediately restore focus back to input control. Of course, if we have some logic for "search_ctrl.onfocus" it should be modified as well. Note that we need to check if search_ctrl had focus to prevent troubles with double clicks.
You may guess that better idea could be canceling onblur event but this won't work in Chrome. Not sure if this is bug or feature.
P.S. "dropdown_wrap" should not have any paddings or borders, otherwise user could click in this areas and we'll treat this as a scrollbar click.
I couldn't get these answers to work, maybe because they are from 2009. I just dealt with this, I think ihsoft is on the right track but a bit heavy handed.
With two functions
onMouseDown() {
lastClickWasDropdown=true;
}
onBlur() {
if (lastClickWasDropdown) {
lastClickWasDropdown = false;
box.focus();
} else {
box.close();
}
}
The trick is in how you bind the elements. The onMouseDown event should be on the "container" div which contains everything that will be clicked (ie, the text box, the dropdown arrow, and the dropdown box and its scroll bar). The Blur event (or in jQuery the focusout event) should be bound directly to the textbox.
Tested and works!
I was facing the same situation/problem and I tested the solution from "ihsoft" but it has some issues. So I worked on an alternative for that and made just one similar to "ihsoft" but one that works. here is my solution:
var hide_dropdownlist=true;
search_ctrl.onblur = function() {
search_has_focus = false
if (hide_dropdownlist) {
// hide dropdown
} else {
hide_dropdownlist = true;
search_ctrl.focus();
}
}
dropdow_wrap.onmouseover = function() {
hide_dropdownlist=false;
}
dropdow_wrap.onmouseoout = function() {
hide_dropdownlist=true;
}
I hope this will help someone.
Earlier also I faced such situation and this is what I have been doing.
$('html').click(function() {
hasFocus = 0;
hideResults();
});
and on the input field i will do this
$('input').click()
{
event.stopPropagation();
}
So this will close the drop down if clicked anywhere outside the div (even the scrollbar).
But I thought if someone could provide a more logical solution.
Could you maybe set the blur event to fire on the drop down div as well? This way, when either the input or the drop down loses focus, it will dissapear...
I'm curious...
You're using the last version of every browser, why don't you try it in chrome 4.0.202?
instead of detecting the blur, detect the document.body or window click and grab the mouse point. determine if this mouse point is outside of the menu box. presto, you've detected when they clicked outside the box!
I solved this by doing the following:
#my_container is the container which has the "overflow: auto" CSS rule
$('#my_container')
.mouseenter(function(){
// alert('ctr in!');
mouse_in_container = true;
})
.mouseleave(function(){
// alert('ctr out!');
mouse_in_container = false;
});
And then:
$('input').blur(function(){
if(mouse_in_container)
return;
... Normal code for blur event ...
});
When I select an element in the drop down, I rewrite the code as:
(>> ADDED THIS) mouse_in_container=false;
$('input').attr('active', false); // to blur input
$('#my_container').hide();