We Keep Coding

Remove focus from a content editable div

If I programatically remove the focus of a content editable div, it looks like it has no focus, but then if the user types it still has focus.
$("#myContentEditable").focus();
$("#myContentEditable").blur();
If you then start typing, it still has focus.
https://jsfiddle.net/zvn4w61d/
This doesn't happen on text inputs.
Any idea how to actually remove focus?
I suppose I could give another text input focus, but Id have to create it on the fly, focus it, and destroy it. A bit hacky to say the least....

You can use selection object representing the range of text selected by the user or the current position of the caret along with removeAllRanges to remove all ranges from the selection:
window.getSelection().removeAllRanges();
Working Demo

Add this code to your main javascript file and all contenteditable components will work fine.
$(function(){
$(document).on('mousedown', '[contenteditable]', function(e){
$(this).attr('contenteditable', true);
$(this).focus();
});
$(document).on('blur', '[contenteditable]', function(e){
$(this).attr('contenteditable', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable>This is a content editable div that the blur really works</div>

You can do this by CSS
Try this
#myContentEditable:read-write:focus {
outline: none;
}
Demo Here

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

Get textbox word on mouse pointer

I have textbox/textarea and I want get only one word with mouse pointed. then display that word in a another text box.
Ex: When I over my mouse pointer on one word, it should display in another textbox/textarea (only that word).
I saw many posts with tag, but it is not possible to add in textbox/textarea
Also I need to create function with mouse click,
I need mouse hover function and mouse click function both ways to get word.
See the
Demo and update this

I'm not sure this will be possible with a plain textarea, but here's a way you could do it using a div with 'contenteditable' enabled.
Works quite nicely, see my jsfiddle demo
(note: click outside of the editable area to re-enable highlighting after any edits).
HTML:
<div contenteditable="true" id="editor">
<div>
Content here.
</div>
<div>
More content here.
</div>
</div>
Current word: <span id="word"></span>
Javascript:
var wrapwords = function() {
$('#editor > div').each(function() {
$(this).html($(this).text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});
$('#editor span').hover(
function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
function() { $('#word').text(''); $(this).css('background-color',''); }
);
};
$('#editor').on('focus', function() {
$('#editor span').contents().unwrap();
});
$('#editor').on('blur', function() {
wrapwords();
});
wrapwords();

jquery hover bubble causing a looping blinking effect

I have a problem with bubbling (i think)
I have an input
On hover I append a div with a click event to the parent of the input, the second hover function is to remove the said appended div.
The problem is, as the overlay is on top of the div i am appending to, when the mouse is over the overlay the mouse out function is called which then triggers the mouse over.. etc etc..
http://jsfiddle.net/N7FFB/
var clear = $('<div class="keyword-clear-icon">').css({
left : $('#searchtext').width() - 20,
}).attr('title','Clear');
$("#dashboard-searchbox #searchtext").hover(
function(){
$(clear).click(function(){
$("input#searchtext").val('');
});
$('#dashboard-searchbox').append(clear);
},
function(){
$('#dashboard-searchbox').find('.keyword-clear-icon').remove();
}
);
Is there a std way of achieving this effect?

Just apply the hover to the #dashboard-searchbox container instead.
http://jsfiddle.net/N7FFB/2/
Javascript
$("#dashboard-searchbox").hover(
function(){
$(clear).click(function(){
$("input#searchtext").val('');
});
$('#dashboard-searchbox').append(clear);
},
function(){
$('#dashboard-searchbox').find('.keyword-clear-icon').remove();
}
);

Instead of using javascript you can use a search type input box:
<input id="searchtext" name="SearchText"
type="search" placeholder="Anywhere or anything…" />
Demo: http://jsfiddle.net/maniator/N7FFB/1/

How to focus on multiple textboxes and scroll to it

I have a lot text boxes in a form that get a class added to them when submitted
then that class gets a :first selector along with .focus() to focus on the text box that didn't receive any input but it cutoffs the message above the text box.
So how do I move the scroll bar in conjunction with the .focus() on text box?

Something like this is what you're after right?
$(function() {
$('input, textarea').each(function() {
var os = $(this).offset().top;
$(this).bind('focus', function() {
$('html,body').animate({scrollTop: os}, 300);
});
});
});
When you focus either an input or a textarea it will scroll to it.
Here's a fiddle of it in action: http://jsfiddle.net/fExhw/
EDIT
$(function() {
$('#submit').click(function(e) {
e.preventDefault();
$('input').each(function() {
if($(this).hasClass('error')) {
var firstError = $('.error:first');
$('html,body').animate({scrollTop: firstError.offset().top}, 300);
firstError.focus();
}
});
});
});
http://jsfiddle.net/fExhw/1/ (hit the submit button at the bottom)
Ok updated it to what I think you're after.

Have you used jQuery.scrollTo? I've had great luck with it solving similar tasks.

In the textbox's focus eventhandler, get the textbox's coords and use jQUery scrollLeft/scrollTop to scroll the page accordingly.
Example (starting point, may need refinement):
function scrollToTextbox(id) {
var coords = $('#' + id).offset();
$(document).scrollLeft(coords.left);
$(document).scrollTop(coords.top);
}
Note: You may have to adjust the scroll a bit (either by adding few pixels or by subtracting) based on how markup and styling is used in your page.