We Keep Coding

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;

Change input text via chrome extension

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.

Is it okay to add an addEventListener to an entire page

I'm trying to show a textarea element when I click on an input element. The goal is to show the textarea, but when I click anywhere else, the textarea disappears.If I click anywhere on the textarea, it stays visible.
I saw a similar example of one on stackoverflow --> Link to similar question
The method was to add an addEventListener to the html tag by using document.documentElement, so basically the whole page, but I was wondering if there was an alternative? And is it safe to add an addEventListener to an entire page?
The code to addEventListener to entire page:
document.documentElement.addEventListener('click',clickhandler,false);
I'm not trying to be picky either, but I would like to avoid using a timeout on the element
Besides the code above, I first tried using the click event, and everything works fine, but when I click anywhere else the textarea doesn't disappear.
I then tried the focus/blur events, but when the input loses focus, the textarea disappears.
I was thinking of an if conditional for the click function... but I'm not sure how that would work without adding a click event to the entire page...
JSFiddle : http://jsfiddle.net/LghXS/
HTML\
<input type="text" id="email">
<textarea id="suggestion"></textarea>
CSS
textarea{
display:none;
}
JS
var textarea = document.getElementById('suggestion');
var input = document.getElementById('email');
// Using the Click Event
input.addEventListener('click',function(){
var display = textarea.style.display;
if(display === '' || display === 'none'){
textarea.style.display='inline-block';
}else{
textarea.style.display='none';
}
});
// Using the Focus and Blur
/*
input.addEventListener('focus',function(){
textarea.style.display='inline-block';
input.addEventListener('blur',function(){
textarea.style.display='none';
});
});
*/
Sooo, any ideas?

Prevent an element from losing focus

We have a lot of inputs in a document.
We want to open a dialog that generates text and puts that in the currently focused input.
The problem is that, when I click a button or anything else to open the dialog that input loses focus. I can't determine which input has to get the generated text.
$("#button").click(function(){
// something should goes here to prevent stealing inputs focus
});
Is there any solution to prevent stealing focus by that special button?

You could not use a form button and just use say a <span> make it behave like a button?
UPDATE:
You could use something like
$('span').hover(function(){
focused_element = $("*:focus").get(0);
});
$('span').click(function(){
focused_element.focus();
});
Check out my fiddle

Does your field have a unique ID? If it does, use that ID to set the focus back to the field when the dialog's save/close button is clicked.
Don't worry about having the focus stolen as much as resetting it once you are done.

My solution would be to handle every focus and save it in focusEle:
$(function () {
var focusEle;
$('*').focus(function () {
focusEle = this;
});
$('button').click(function (e) {
console.log(focusEle);
var c = confirm('Love the cat :3?');
$(focusEle).focus();
});
});
With HTML as:
<input type="text">
<button>Press me!</button>
Example is working: http://jsfiddle.net/76uv7/
Depending on #ggzone idea

HTML modal popup can lose focus by tabbing to form fields in background

I have modal popup with an overlay written in html / js, everything works fine but if a user tabs enough they can get to the underlying form fields / buttons. Is there any good way of preventing this?

This is a rough idea but I'm hoping to inspire ideas rather than tell you exactly how to do it. I'll use a combination of pseudocode and pseudo-jquery-code:
function showMymodaldExample() {
//Show modal dialog (mymodal) code goes here
//
//Then we bind an event
$(document).bind('mymodal.keydown', function(e) {
if ( currently focussed element is not a child of mymodal ) {
set the focus previous element
}
});
}
And then remember to unbind mymodal.keydown when you destroy/hide the dialog