We Keep Coding

focus is not working after the blur event to the textbox in jquery

while dragging the div, i need to remove the focus of the input and on dropping it, add focus. I have enclosed my code here.
$('.ui-draggable').mousedown(function(){
$(this).find('input').blur();
$(this).addClass('draggable');
}).mouseup(function(){
$('.draggable').find('input').focus();
$(this).removeClass('draggable');
});

I don't think you need to call 'blur', as the input will lose focus when you click the ui-draggable element. You should probably use the stop-event of draggable.
$('.ui-draggable').on( "dragstop", function( event, ui ) {
$('yourinputselector').focus();
});

Prevent drag event to interfere with input elements in Firefox using HTML5 drag/drop

It seems that an input element loses a lot of functionality when put into an element with draggable="true". This only seems to occur in firefox.
See my jsfiddle:
http://jsfiddle.net/WC9Fe/3/
Html:
<div id="drag" draggable="true">
Drag this div <br />
<input id="message" type="text" />
</div>
<div id="drop">
Drop area
</div>
JS:
$('#drag').on('dragstart', function(e){
e.originalEvent.dataTransfer.setData('Text', $('#message').val());
e.originalEvent.dataTransfer.effectAllowed = 'move';
});
var drop = $('#drop');
drop.on('dragover', function(e){
e.preventDefault();
});
drop.on('dragenter', function(e){
e.preventDefault();
});
drop.on('drop', function(e){
alert('Target succesfully dropped: ' + e.originalEvent.dataTransfer.getData('Text'));
e.preventDefault();
});
Now try to select text in the input using firefox. Seems impossible. Try the same in IE/Chrome. Seems to work just fine.

As far as I know this is a known bug in FF. A quick (and "dirty" workaround) would be to remove the draggable attribute on text input focus event, add it again on text input blur event, and disable text selection on #drag div to enable dragging once you clicked outside the focused input (clicking on #div directly).
Updated fiddle here.
Sample code:
JS:
$('#message')
.on('focus', function(e) {
$(this).closest('#drag').attr("draggable", false);
})
.on('blur', function(e) {
$(this).closest('#drag').attr("draggable", true);
});
CSS:
.disable-selection {
/* event if these are not necessary, let's just add them */
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
/* this will add drag availability once you clicked the
#drag div while you're focusing #message div */
-moz-user-select: none;
}
Hope it could help you.

See Firefox defect.
As an alternative, setting the draggable="false" on input focus event and replacing back to draggable="true" on input blur event works.
See jsfiddle for an example without any framework.
HTML:
<div draggable="true" id="draggableDiv">
<textarea onfocus="onFocus();" onblur="onBlur();">Inside draggable (FIXED)</textarea>
</div>
JS:
onFocus= function(e) {
document.getElementById("draggableDiv").setAttribute("draggable", "false");
}
onBlur= function(e) {
document.getElementById("draggableDiv").setAttribute("draggable", "true");
}

I used the onMouseEnter and onMouseLeave functions on the textarea to set the div draggable only when the mouse is outside the textarea.
I did this because I needed the focus to stay in the edit fields while dragging and dragging itself does not trigger a focus event.

I have also found using onmouseenter and onmouseleave to toggle the draggable attribute works better because it places the cursor in the input box where you actually click. When using onfocus/onblur, the cursor always goes to the start or end of the text even if you click in the middle.

If you are like me and come across this issue, and are using Sortable.js, you can use the filter option to specify elements that won't trigger dragging, and thus allow the input to operate normally.
JQuery:
$('#my-sortable').sortable({
filter: ".my-text-input", // Or whatever class you specify
preventOnFilter: false // Allow the input to operate normally
});
You can also find this information from the list of Sortable.js options found here:
https://github.com/SortableJS/sortablejs

jquery blur not working on "exiting" text input even though "click" does

I'm trying to make a custom dropdown be able to be "tabbed into" using jquery. That is, it is made of a ul, and I want the text input directly above it, when tabbed out of give some sort of focus to the ul. But for some reason this
var input = $("ul.dropdown_ul").prev("input");
$("#container").on("blur", input, function(){
alert("test");
});
does not work. With click as the event, the alert fires. But blur is not working.
JSBIN
Any ideas on why this doesn't work? Thanks.

Your #container is a div. Typically blur is used on inputs, thats why it not working. The following works fine.
$("#container input").on("blur", function () {
alert("test");
});`
Update Regarding Comment:
If your looking to have a specific element have the on blur event. Just make sure you select it properly and apply the listener to it. I think this is what you're trying to accomplish.
var $input = $("ul.dropdown_ul").prev('input')
$input.on("blur", function () {
alert("test");
});
Example

Preventing select menu from opening

Possibly a silly question, but how do I prevent a select element in a form from showing its drop down menu when it's clicked on? I tried the following:
$('select').click (function (e) {
console.log (e);
return false;
});
and
$('select').click (function (e) {
e.preventDefault ();
console.log (e);
});
But neither worked.
What am I doing wrong?
EDIT: The reason I need to know is for a jquery enhanced select element that needs to degrade gracefully. The idea is the select, when clicked, opens a jquery UI dialog with a nicely maked up list that the user makes their selection from (clicking a list item causes the select's value to update). If JS is disabled then the select should just operate as normally.
The problem is that as well as the dialog opening, the dropdown also appears, which is not what I want. I can't just disable the control, as its value needs to be submitted along with the rest of the form.

This should work:-
$('#select').on('mousedown', function(e) {
e.preventDefault();
this.blur();
window.focus();
});

The problem is that you're using the wrong event.
<select onmousedown="(function(e){ e.preventDefault(); })(event, this)">
<option>Some Option</option>
</select>
JsFiddle

From my experience, if i need to disable something, the easiest way to have another invisible element on it (use absolute positioning). When you want to allow default behavior again, you just hide absolute element.

I believe the best solution would be to replace the select element with something else to click on (a button or a link).
BTW, you may want to look into the CSS 3 property appearance, which theoretically allows you to let that replacement element look like a dropdown. Support is however currently very limited:
http://css-infos.net/property/-webkit-appearance
https://developer.mozilla.org/en/CSS/-moz-appearance

You can, the trick is to cancel the mousedown event, not the click. The event chain is made in such a way that click and mouseup cannot occur if mousedown was cancelled:
function cancelDropDown(ev) {
ev.preventDefault();
}
document.getElementById("selectElement").addEventListener("mousedown", cancelDropDown, false);

Hide the select options on page load (if Javascript enabled). They will not display when the select box is clicked, but the text of the first option ("Select an option", or whatever) will still appear in the select field.
$(document).ready(function() {
$('#idOfSelect option').css('display', 'none');
});
Updated Solution:
$(document).ready(function() {
$('#idOfSelect').focusin(function() {
$(this).css('display', 'none');
$('body').click(function(event) {
$(this).unbind(event);
$('#idOfSelect').css('display', 'block');
});
});
});

I just solved this exact problem, by manipulating the 'size' attribute of select. Not very elegant, but worked. Hope its of some help to you.
<!-- Example select dropdown -->
<select id="select" onclick="tackleDropdown()">
</select>
<!-- The JS function -->
<script>
function tackleDropdown(){
document.getElementById('select').setAttribute('size', 0);
// your code for displaying the jQuery UI dialog (is it colorbox???)
// re-enabling the drop down
document.getElementById('select').setAttribute('size', document.getElementById('select').options.length);
}
</script>

Use disabled
$(this).attr("disabled","disabled");

Some good answers here. But still I had to make some additions.
$(document).on('keydown mousedown touchstart', 'select.disabled', function (e) {
e.preventDefault();
})

A simple solution based on CSS is this small fragment:
select:read-only * {
display: none;
}
This will make the options not available when the select is selected. This action mimics the behavior of the "readonly" attribute of the input.

Allow clicking a link through a div that is bound to the "click" event

I have a div containing some content, in which there are some links. The div itself watches for the click event so it can make the content editable. However, I want the user to be able to click the links inside of the div and have it navigate to the linked page rather than edit the content (clicking anywhere else in the div should edit the content though). How do I achieve this?
Code example:
<div id="content">
Here's a link.
</div>
// jQuery Javascript:
$("#content").click(function() {
// Make content editable
});
(Clicking on the link shouldn't make the content editable, and instead should direct the page to google.com.)
Edit: I'm using my own code to make the content editable (switching out the div with a text area, that sort of thing).

Check the event target and return true
$("#content").click(function(e) {
if ($(e.target).is('a')) {
return true;
}
});
Not tested
The thinking behind this is to bail-out early from the handler and, by returning true, allow the browser to handle the event the usual way.

One error you have is that you are using content as a class in your HTML, but as an ID in your jQuery. So you should change your HTML to id="content" (assuming no other elements on your page already have that id.
Your Javascript can look like:
$("#content").click(function(){
this.setAttribute('contenteditable', 'true');
$(this).focus();
}).blur(function(){
this.setAttribute('contenteditable', 'false');
});
$("#content a").click(function(e){
e.stopPropagation();
});
Here's a JSFiddle: http://jsfiddle.net/q77Bs/

example
use event.stopPropagation()
// jQuery Javascript:
$(".content").click(function(e) {
// make content editable
});
$('.content a').click(function(e) {
e.stopPropagation();
});

You could change the z-index of the link to be greater than that of the div (not sure if that will work), or you can place each link inside another div with a higher zindex than the main div. This will prevent clicks from registering on the primary div, so make sure the secondary divs are correctly sized so as not to prevent the editing functionality

$('#content a ').live("click", function(event){
event.stopPropagation();
});
this will do the trick