Develop Reference

Output doesn't appear in Input field but value exists

I am confused, I used jQuery to $("#display").html(value) toward my html input with id ="display" but nothing appears in the html input.
However we can see the value in the element : "32" (see picture)
Any idea why the value doesn't appear?
I try to replace input by span and it works well.
image : example
thanks,
Thomas

You cannot set the innerHTML value of an input element (which is what jQuery is doing when you use $.html()). Instead, you need to use $.val().
Try using $("#display").val(value) instead.

Getting user input text without HTML input elements

Is there a way using angular or just javascript to get the user input text not using HTML input boxes? For example when a user clicks on a paragraph he will be able to change its text without a text area popping so he could input. I tried focusing on angular ngHide element( a input HTML) but with no success. It only focused on the element when its showing.

Try contenteditable introduced in HTML 5.
Try Fiddle.
<p contenteditable="true" onfocus="alert(this.textContent)" onblur="alert(this.textContent)">
Enter Name
</p>

But there is. contenteditable is an HTML attribute that makes divs and cells editable. you can make a directive in angularjs to use that, but beware of the caveats that it introduces.

Take a look at x-editable. It will suit your needs, i think.

$.html is not having textarea value

When we are trying to get the html of div using the below code it is having all the data except the text which I am entering in the textarea or input field
var mywindow = $(printDiv).html();
mywindow will have all the html except textarea text, radio button values or inputfield.
I have looked into this question but using clone is giving any text at all.

The thing to remember is that .html() does exactly what it says: it gives you the HTML currently in the DOM within that node. But the thing is, content entered by the user, and more generally the content of HTML input fields, is not a part of the HTML. Entering text into a textarea or checking a checkbox or radio button doesn't change the HTML one bit. It does update the internal memory representations of the individual DOM nodes, but this isn't represented in the HTML.
Whenever you want to get content from an input element on the page, you have to use .val() instead of .html(). The .val() function also does what it says: it gets you the value of the input field.

To get the text in a textarea you have to use .val() in JQuery. e.g.
var text = $('#textarea_id').val();
console.log(text);
The second line logs it to the console so you can check it works.

I change some text inside draggable node, then i drag this node in another container and the old value is back

I have a dojo.dnd container (UL tag). inside of it i have an tag (in LI tag), i change the value of this INPUT in browser and then i drag this LI to another container. After dropping i see the old value in my INPUT field. Could you help me not to lose a new value in input field
thanks
BEFORE DRAGGING, AFTER VALUE CHANGING
AFTER DROPING

I'd guess that the space is breaking your code. Is the data URL encoded? Try replacing the space with "%20" and see if you still get the error.

Problems with contenteditable in Firefox

I am working on a Javascript WYSIWYG editor in Firefox. I am using a div with the contenteditable attribute set to true in order to accomplish this (I cannot use a contenteditable iframe for this particular project). This contenteditable div is nested in another div that is not contenteditable. I am encountering the following two problems when using execCommand to apply formatting, including font style and size, as well as bold, italic, and underline:
When all text in the div is selected, execCommand simply does not work. execCommand works fine when only part of the text is selected, but does nothing when all of the text is selected.
Applying formatting with no text selected yields unexpected results. For example, when calling execCommand('bold') with no text selected and then typing results in bold text being typed until a spacebar is inserted, at which point the bold formatting is lost (until another space is inserted, interestingly enough; then the text becomes bold again).
To see what I mean, please try running the following HTML code in Firefox 3:
<html>
<head><title></title></head>
<body>
<button onClick="execCommand('bold', false, null);">Bold</button>
<div style="width: 300px; border: 1px solid #000000;">
<div contenteditable="true">Some editable text</div>
</div>
</body>
</html>
Please try the following:
Select the word "Some" only. Click the Bold button. This will make the text bold, as expected.
Select the entire phrase "Some editable text" (either manually or using CTRL-A). Click the Bold button. Nothing happens. This demonstrates the first bug shown above.
Hit the backspace key to clear the div. Click the Bold button and begin typing. Type a few words with spaces. This will demonstrate the second bug.
Any ideas on what could be causing these problems and how to work around them would be greatly appreciated!

Interesting. In Firefox 3.6.3, I can't replicate the first problem: selecting all of the editable text and pressing the button toggles boldness as expected. However, the other two issues I do see. They'll be bugs in Mozilla's implementation of contenteditable.
Interestingly, the alternate-words-bold problem doesn't happen if you use designMode rather than contenteditable. I suspect it will solve your other problem too. This involves making the whole document editable, rather than just elements within it:
window.onload = function() {
document.designMode = "on";
};
If this isn't an option and you need the fine control that contenteditable provides, you'll need to implement your own version of the bold command using DOM manipulation and Ranges. This will be quite involved to get working in IE and non-IE browsers.