Override ENTER key handling in CKEditor dialog - javascript

I'm adding an autocomplete feature to CKEditor 3.6 dialog textinput box.
The problem is that selecting a value from the list with ENTER key is not possible because it closes the dialog and all the ENTER key events are stopped from bubbling up the dom.
I can see that in _source/plugins/dialog/plugin.js:
// ESC, ENTER
var preventKeyBubblingKeys = { 27 :1, 13 :1 };
var preventKeyBubbling = function( e )
{
if ( e.data.getKeystroke() in preventKeyBubblingKeys )
e.data.stopPropagation();
};
Is there a way to override this behavior without changing the original code?
Any other ideas are also welcome!

Looks like I will have to put all the dialog content in iframe just to work around this.
It would be nice if the list of keys prevented from bubbling was configurable and not hardcoded.

For CKEditor 4, I have solved this problem by disabling OK button while autocomplete is working and enabling it again when input loses focus:
CKEDITOR.dialog.getCurrent().getButton("ok").disable();
CKEDITOR.dialog.getCurrent().getButton("ok").enable();

Related

Block modal with "data-backdrop" and "data-keyboard" on runtime?

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;

How to catch an ENTER event and convert it into a TAB event?

i'm looking for a JQUERY or JS script to catch onkeydown Primefaces InputText property with ---> event.keyCode == 13 and convert it into a event.keyCode = 9.
I tried to script a solution like this in the example below.
But it doesn't works for me.
I tried different way to catch the event, cancel it and re-launch another event, but the problem persist.
So, can I convert it or launch another event to prevent the ENTER event? I don't wanna delete the possibility to press Enter to the user, I just wanna convert it.
temp0.onkeydown = function(e) {
if (e.which == 13) {
e.preventDefault();
var event = new Event('keydown', {bubbles: true, cancelable: true});
event.which = 9;
this.dispatchEvent(event);
}
}
Right now i'm using Primefaces 6.0 and a TreeTable for my InputText. I test the problem with TAB and it works perfectly, but with the Enter key the problem seems to block the entire table.
I read everything about this argument, but i was not able to find anything useful. I hope that somebody will able to help me. Thanks in advance.

Jquery check box change function not working in IE 8

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;
}
});
});

Disabling right click in CkEditor 4.3

Is there a way to programmatically disable the right click of the mouse on a particular element inside the editor?
I need this to use this functionality to disable the resizing of one particular table element inside the editor, which is managed by the tabletools plug-in.
The most correct solution would be to disable proper command when such table is selected, but I see that unfortunately it doesn't disable menu item for that command, but only prevents executing that command. So less cool solution has to be used:
editor.on( 'contentDom', function() {
editor.editable().attachListener( editor.editable(), 'contextmenu', function( evt ) {
console.log( evt.data.getTarget() );
evt.stop();
evt.data.preventDefault();
}, null, null, 0 );
} );
This will disable context menu completely. You can add proper condition based on evt.data.getTarget().
You can disable right-click on particular elements using jQuery as:
$('img').bind('contextmenu', function(e) {
return false;
});
Refer this question for more details.

Safari issue with text inputs, text is selected as user enters it causing text to be lost

I have the following input element on my page:
<input class="input" name="custom_fields[new]" placeholder="Enter placeholder" type="text">
I have a Twitter Flight event listener on this element that looks like this:
this.on('keyup', {
inputsSelector: this.updateViewInputs
});
Which triggers this method:
this.updateViewInputs = function(ev) {
var isDeletionKeycode = (ev.keyCode == 8 || ev.keyCode == 46);
// Remove field is user is trying to delete it
if (isDeletionKeycode && this.shouldDeleteInput(ev.target.value, this.select('inputsSelector').length)) {
$(ev.target.parentNode).remove();
}
// Add another field dynamically
if (this.select('lastInputsSelector')[0] && (ev.target == this.select('lastInputSelector')[0]) && !isDeletionKeycode) {
this.select('inputsContainer').append(InputTemplate());
}
// Render fields
that.trigger('uiUpdateInputs', {
inputs: that.collectInputs()
});
}
And finally triggers uiUpdateInputs:
this.after('initialize', function() {
this.on(document, 'uiUpdateInputs', this.updateInputs)
});
this.updateInputs = function(ev, data) {
// Render all inputs provided by user
this.select('inputListSelector').html(InputsTemplate({ inputs: data.inputs }));
}
All of this functionality works as expected on Chrome and Firefox. Users can type into the input and see the page change in 'real time'. Users also get additional fields that they can enter text into and see the page change.
The issue in question arises when using Safari, as a user enters text into the described input field the text in the input field becomes highlighted (selected) and when they enter the next character all the content is replaced with that single character. This results in the user not being able to enter more than 1 or 2 characters before having them all replaced by the next entered character.
I have tried several approaches to fix this problem but none have worked, they include:
Using a setTimeout to delay the code run on the keyup event
Using Selection to try to disable the selection of the text using collapseToEnd.
Using click,focus,blur events to try to remove the selection from the entered text
Triggering a right arrow key event to try to simply move the cursor forward so they user does not delete the selected text
Using setInterval to routinely remove selections made by the window
I am very confused why this is happening and I am wondering if this is a bug in webkit with Flight. I see no issue with the Firefox or Chrome versions of this page. Thanks for any help!
This seems to be an issue with certain versions of Safari. When listening for the keyup function in javascript it will automatically select all of the text in the box and subsequently delete it all when the next key is typed. To prevent this from happening call preventDefault on the event object that is passed to the keyup function.
this.on('keyup', function(e) {
e.preventDefault()
});

Categories