Develop Reference

How to cancel selection in contenteditable div?

On my page, I have a contenteditable div element. When a specific key is pressed, a function executes:
function bla(element) {
if (getSelectionHtml() != "") {
replaceSelectedText("text");
}
}
getSelectionHtml() checks if something is selected by the user. replaceSelectedText(text) replaces the selected text with a given string. Both functions are working properly.
After the selected text has been replaced, I want to 'cancel' the user's selection, as the selection is now equal to the 'new' string, so just deleting the text is not an option.
I tried this:
element.style.userSelect = "none";
element.style.userSelect = "text;
But it didn't work because userSelect: none doesn't seem to change anything in a div element with contenteditable. Also, this solution looks pretty ugly for such a simple problem.
So, how can I cancel the user's selection?

I think you want to remove selection completely. You can do so once you have replaced the string with
window.getSelection().removeAllRanges()
So basically, once you select the range of content, you can get the range with window.getSelection() method which returns set of details about selected content. It has many functions to alter the range and remove the range completely. To know more, you can read in brief of all supported methods Selection API

After appending input field to a different container, I cannot continue typing in the text input unless I click again. It loses focus

Here's the main part of the function that I'm having trouble with. I am using this function on a text input field for the oninput="myFunction" attribute.
function myFunction() {
var myContainer1 = document.getElementById("newContainer");
var myContainer2 = document.getElementById("inputContainer");
myContainer1.appendChild(myContainer2);
myContainer2.style.display = "inline-block";
}
So what I have done here is moved my input container inside of another container. After I type my first character in the input field, the field moves to the other container, however it loses focus and I cannot continue typing unless I click the input field again.
Here's an example:
If you go to the google homepage: https://www.google.com/
When you start typing, the search field input element moves up to the header, however you can still continue typing as if nothing happened. The caret doesn't disappear and it doesn't force you to click the field to continue typing.
My issue is, right after my input element moves, it doesn't allow me to continue typing unless I click the field again.
I'd really appreciate any help!

You can fix it by requesting the focus to the desired element:
function myFunction() {
var myContainer1 = document.getElementById("newContainer");
var myContainer2 = document.getElementById("inputContainer");
myContainer1.appendChild(myContainer2);
myContainer2.style.display = "inline-block";
myContainer2.focus();
}

Get current div and add html

I created on page where there is editable content.
I want to give user chance to add data on that page.
like, if they click 'textbox' there is will textbox in certain div.
but now if they add div and then inside that div, they want to add anything than how its possible ?
How can get current div(where my mouse current position), so if i select particular div which is editable, than they can add textbox inside it in.
checkout fiddle, there is something like document.activeElement but its not working.
so how to get current div and add element into that particular div only.
When my mouse is in particular div / form than i want to add textbox / h1 should be added in particular that div / form.
P.S.
I need to get Id of my current cursor position.
if my cursor is inside form1 than i should get form1 and append html inside that.
i cant use $(this) because, this will return me where i clicked, not where my cursor position is.

apply this it works
$(document).ready(function(){
$(".addForm").on("click", function(){
var current = $(this);//use $(this) at the place of document.activeElement
var myCurrentId = this.id;// here can also use $(this).attr("id");
$(".uiHTML").append("<form id='1' contenteditable='true'></form>");
});
$(".addH1").on("click", function(){
var current = $(this);
var myCurrentId = this.id;// here can also use $(this).attr("id");
$(".uiHTML").append("<h1>Hello</h1>");
});
});
see demo

Get the value of a textbox during cut event

I have trapped the cut event (jquery) on a textbox. What I want is to get the text on the textbox during the cut event is triggered.
I've tried accessing the data the user cut via evt.originalEvent.clipboardData.getData('text') but returns undefined.
My goal is to know if the user cut all the text (textbox is now empty) or not.
Thanks in advance

You can setTimeout with a duration of 0, which schedules a function for immediate execution. The nice thing is that the function will execute once the text has already been cut, so you can check then if your textarea is empty (which would mean that the user has cut all the text):
var ta = $('#YOUR_TEXTAREA');
ta.bind('cut', function() {
setTimeout(function(){
if (!ta.val()) {
// user cut the whole text.
}
},0);
});
You might also want to add a check before the setTimeout to test whether there is any text in the textarea before the text gets cut (if the user presses Ctrl^X without any text being selected, the cut event still triggers)

Hope I got you right:
In jQuery you could use something like this to see if a textbox is empty on every user's keyup:
var txt;
$('#textbox_ID').live('keyup', function() {
txt = $(this).val().length;
if(txt < 1) {
alert("textbox is empty");
}
});
This should work, because everytime the user releases a key and has the textbox focused, it checks if it's empty.

I would suggest looking at this, JavaScript get clipboard data on paste event (Cross browser), it is for the paste event but I'm sure you could do something similar and compare the current value to that on the clipboard, if they are exactly the same than the input would be empty, otherwise not.

how to create a new text field below when pressing a key?

last.fm has this nifty feature when you're adding an event. you have the Artists field, and when you start typing in it, another text field appears beneath it. when you start typing in that next field, another new field appears beneath and so on. I've been trying to figure out how to mimic this functionality using jquery but I can make it work on the first, stationary, field only. any ideas?
edit:
actually, nope, it's not working even for the stationary one, since it adds the field on EVERY key press
edit2:
alrighty, so some fine folks have already solved my adding issue, now, how would one go about adding the field only after the first time a key is pressed.

You are probably only binding your handler to the first static input, and not the dynamically created ones. Use .live() to do your event binding. That will bind the event to future elements that match the selector.
To make sure you only add one new one, make sure you only add it when typing into the last textbox. Check $(this).closest(".container").next(".container").length to make sure there isn't already a new textbox.
$("input.myClass").live("keyup", function (e) {
var $container = $(this).closest(".container");
if (this.value && !$container.next(".container").length) {
var $newContainer $("<div>").insertAfter($container).addClass("container");
...
}
});

Live is the right idea but closest is overkill: jsFiddle
$("input").live("keyup", function (){
if ( !$(this).next('input').length ) $(this).after('<input type="text"></input>');
});