We Keep Coding

cleditor comes up disabled

I am using "CLEditor WYSIWYG HTML Editor v1.4.5"
When I open the window containing the TextArea element I'm using with clEditor, the Editor comes up disabled and it appears that the TextArea element is invisible. I have text in the TextArea element but the text is invisible.
If I right click on the body of the TextArea and select "Inspect Element", the debugger window opens and the Editor becomes enabled and the TextArea becomes visible. Then I close the debugger window and everything appears to be functioning correctly.
HTML:
<div id="maintBody">
<textarea id="woEditor" name="woEditor">This is the test data... is this editable?</textarea>
</div>
Javascript
$("#woEditor").cleditor( {height: "400"});
No CSS
If I comment out the Javascript .cleditor() call, then the TextArea element appears and functions correctly. So there is definately some setting in the editor initialization that is setting this state.
You can access this page at: http://test.nds.link then click on the "Props" Tab in the left column
Does anyone know what would cause the clEditor to come up in a disabled state, making the TextArea element invisible?

I had the same error while I using CLEditor inside a DIV which was toggled via jQuery.
The animation-Parameter cause the error! After I removed it, it works like a charm!
wrong way:
$("#cT_new_form").toggle("slide",700);
right way:
$("#cT_new_form").toggle(700);
So don't use "slide" as animation or CLEditor won't focus after slide!!!

The following fixed this issue for me without having to remove the effects:
cleditor problem with jquery ui effect()?

Blur event not firing on <label> - can't find workaround for dealing with hide-on-blur <input> text field

TL;DR how can I get this self-explanatory JSFiddle to work?
From the W3C:
The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
The basic idea, HTML:
<form>
<label>
<input type="text" />
after focusing in input, there should be no blur when clicking here
</label>
</form>
but blur should fire when clicking here
And JS:
$("form, label").on("blur", function() {
alert("you're not going to see this");
});
It doesn't work. A more illustrative example is in this JSFiddle.
I also tried focusout, with this JSFiddle, but (presumably because it bubbles up from the input), it always fires.
I could probably rig up what I need with a hack like this: https://stackoverflow.com/a/5049387/458614 but I'd rather not have to.
Edit: There are lots of related questions and I have read all that I could find, none of which help. Some talk about setting tabindex=0 on the form or label elements. I have tried this in various permutations but it doesn't help. JSFiddle here. If you put it on the form, blur events do fire when you click outside the form. However, it doesn't apply to any of it's children: it won't pick up anything if you click on the input and then outside the form.
Edit 2: I don't really understand some of the answers posted so far and none seem to really... work. Anyway, to clarify, here is what I am trying to accomplish:
In my app, you can add tags to documents. When you click the "add tag" button, a previously-hidden text input field pops up and is focused. And then...
Clicking outside (on blur) should close the text input field again
Pressing enter should add the tag and close the input field
Clicking the "add tag" button should also add the tag and close the input field
The problem is that #1 and #3 are incompatible. The "add tag" button needs to perform a different action based on whether the text field is open or closed, but because I can only achieve #1 with an onblur event on the text field, the text field is closed by the time any action happens on the "add tag" button for #3.
Here is a JSFiddle with my best attempt so far.

The thing I think you are looking for is
e.stopPropagation();
This Fiddle here shows a little different way to handle it ... it put the hide on a window click (which would blur the input anyways) except on the label, which it would allow the click event to stop inside the label.
Happy coding!

use the below code to achieve the desired
$(document).on("blur", "label",function() {
$("div").append("form or label blurred<br>");
});
Here is the demo Fiddle

Try this it should work
.focus {
border-color:red;
}
$(document).ready(function() {
$('input').blur(function(){
$('input').removeClass("focus");
})
.focus(function() {
$(this).addClass("focus")
});
});

Add this piece of js in your Fiddle. you added listener for label but blur happens on anchor tag.
$("form a").on("blur", function() {
$("div").append("form or label blurred<br>");
});

according to your explanation i have create a demo
$("form > label >a").on("blur", function() {
return false
});
$("#outsideform > a").on("blur", function() {
alert("but blur should fire when clicking here");
});
Check the Demo here

For a while, I am posting an intermediate development. But this definitely will help you where exactly you should look for. The jquery implementation but not your javascript.
This is the real concern.
I have added 3 lines at different places. no big changes.
Added an || $("input").css("visibility") == "visible" to the if
condition
Added $("input").css("visibility","hidden"); to the inner else condition
$("input").css("visibility","visible"); to the outer (and last) else condition.
Please note this is intermediate, you need to click twice after a submit of non-empty text.
If I get time, I would post the correct working thing.
This is the fiddle.

tobek, your JSFiddle with my best attempt so far is almost there. The problem is your selector at the bottom in this section of code:
$("input").on("blur", function(){
$("input").hide();
});
You stated the problem correctly in your comments when you said: "THE PROBLEM: we never get in here because it's already been hidden because the input blurred".
Change the above section to this and I think you'll have what you're looking for.
$("input-blur label").on("blur", function(){
$("input").hide();
});
Because the "Add tag" link is inside the label clicking it doesn't trigger your "blur" function.

How to make IE recognise this .change in jquery

I'm writing a jquery/javascript application. Part of what I need is a file input, which I need to look the same across Firefox, Chrome, and (ugh) IE. What I've done is made the file input hidden and placed a text box on top of it. Then, I use jquery .click to make clicking the text box have the same effect as clicking the file input, and I use .change to make the contents of the file input show up in the text box. Works fine in Firefox and Chrome, but the horrible horrible people at Microsoft want to ruin my day.
If anybody has the solution, I would be oh so grateful. Thanks in advance!
<input type="text" id="fakefile">
<input type="file" id="realfile">
$(document).ready(function(){
$('#fakefile').click(function(){
$('#realfile').click();
});
$('#realfile').change(function(){
$('#fakefile').val($('#realfile').val());
});
});

It's not possible, you can do some hackyness and add a label to the file input and trigger the click on the label not the input but as soon as you try to submit the form it will simply fail in IE.
The way I solved the problem was to turn the file input opacity to 0 and absolutely position it over the styled element I want the user to think they are clicking. This way they are in fact clicking the file input even though it appears they are clicking my styled element.

Check this:
$(document).ready(function(){
$('#fakefile').click(function(){
$('#realfile').click();
});
$('#realfile').bind("change click", function(){
$('#fakefile').val($('#realfile').val());
});
});
jsfiddle: http://jsfiddle.net/deAf6/

Keep selection made on editable DIV when focus is on other element

I have had this problem for a long time and I just can't figure out how to fix it. I want to create a simple WYSYWYG editor and I have some problems.
Currently I have this:
<div id="editor" contenteditable="true"></div>
<input type="button" value="B"
onmousedown="document.execCommand('bold',false,null); return false;"/>
So, if I have some text inside my DIV, select it and click on "B" it is converted to BOLD, and remains selected, but this doesn't work on Opera and IE.
I just don't know how to make the editable DIV not only keep the focus but also the text selection.
Any idea?

Two possible options are:
Use mousedown instead of click and prevent the default browser action: http://jsfiddle.net/dA9NK/
Make the button unselectable: http://jsfiddle.net/8hpvv/

Manually triggering the iPhone/iPad/iPod keyboard from JavaScript

I am developing an HTML code editor using simple DIV's and capturing events. When I use this on the iPad the keyboard never pops up since i'm not technically in an editable field.
Is there a way to programatically tell the iPad that I need a keybaord?

If your code is executed via something that was initiated via a user action then it will work.
E.g;
this works (pops keyboard):
<input type='text' id='foo'><div onclick='$("#foo").focus();'>click</div>
this doesn't work (input gets a border but no keyboard pop):
<input type='text' id='foo'>
<script>
window.onload = function() {
$("#foo").focus();
}
</script>

To make the keyboard show on iOS devices you need to focus on an editable element such as an input or a textarea. Furthermore, the element must be visible and the .focus() function must to be executed in response to a user interaction such as a mouse click.
The thing is - we DON'T want the input element to be visible..
I have fiddled with this for quiet some time and eventually got the result I was looking for.
First, create an element you want to use to show the keyboard - in this case a button, and a hidden input element: (Working jsFiddle or Test on a mobile device)
<button id="openKeyboard">Open Keyboard</button>
<input id="hiddenInput" style="visibility: hidden;">
Then use the following javascript:
document.getElementById('openKeyboard').addEventListener('click', function(){
var inputElement = document.getElementById('hiddenInput');
inputElement.style.visibility = 'visible'; // unhide the input
inputElement.focus(); // focus on it so keyboard pops
inputElement.style.visibility = 'hidden'; // hide it again
});
Notes:
I have noticed that iOS safari will automatically scroll and zoom to the area of the input so make sure you use proper viewport and position your input element in a relevant location.
You can use some CSS on your input like setting the opacity, height and width to 0. However, if your input is completely hidden this won't work again, so make sure you leave the padding or border just so there's something to be rendered (even though it won't show up due to the opacity). This also means you shouldn't use display:none to hide it, hidden elements are just not allowed to be focused.
Use the regular keyboard events (keydown, keypress, keyup) on your hidden input to access the user's interaction as you would normally do. Nothing special here.

Place a transparent textarea over the contentEditable div. The keyboard will open, as soon as the user focus the textarea.
Register an event listener on the textarea for the focus event and set the visibilityof the textarea to hidden. This prevents the blinking cursor.
Set the visibility of the textarea back to visible after the blur event occurred.
Register additional event listeners for keydown, keyup, keypressevents and process theses events the same way, as you process them in the contentEditable div.

I have found that calling prompt("Enter some value") does trigger the keyboard on my iPad 2. Not sure if this is helpful in your situation or not.

The answers to this questions suggest that it's not possible: Why doesn't #contenteditable work on the iPhone?
A colleague of mine who was working on a similar project ended up using a textarea for the iPad version of his editor, and contenteditable divs/spans for browsers that support contenteditable. Perhaps something similar would work for you.

Proxy input trick
I figured out another dirty workaround, but works well.
The trick is based on the fact, that if the keyboard is already open, changing the focus will not close the keyboard.
Add a small "proxy invisible input" in top left of the page with position fixed (the fixed position prevents the flicker, also make sure that the field has font-size bigger than 16px to prevent iOS page zoom on focus)
On clicking the button, just .focus() on this invisible field. The keyboard will open...
Show or render your other input fields
Now with the keyboard open just .focus() on the desired input. You can use small setTimeout delay, for example 500ms if needed

Here's a solution for you:
<input id="my-input" type="text" />
<script type="text/javascript">
var textbox = document.getElementById('my-input');
textbox.select();
</script>