Develop Reference

What event does jQuery fire when using append on a textarea?

I'm trying to monitor for any changes in a textarea:
<textarea id="log-box__data"></textarea>
Changes are made to the textarea exclusively via jQuery append:
$(document).on('click', '#myBtn', function(e) {
$('#log-box__data').append('someText' + '\n');
});
What event is fired whenever something is append[ed] to the textarea?
And, if there isn't one, how can I monitor for this change?
Things I've Tried:
$(document).on('input change keyup paste', '#log-box__data', function() {
alert( "foobar" );
});
None of those events fire when #myBtn is clicked.

Using trigger function after append will help
$(document).on('click', '#myBtn', function(e) {
$('#log-box__data').append('someText' + '\n');
$('#log-box__data').trigger("change");
});
$('#log-box__data').on('change', function(e) {
alert( "foobar" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="log-box__data"></textarea><br />
<button id="myBtn">add text</button>

append is not a good idea and also set a value will never call the onchange event so try below code to trigger manually
$("#myBtn").bind("click",function(){
$("#log-box__data").val("yourtexthere").trigger('change');
});

Highlight input text not working

Hello I would like the text inside an input element to highlight upon initial click. However my function does not seem to be working. I have researched the issue and seen that there are some issues with jquery 1.7 and below. I have adjusted it to account for this any it still does not work.
Any help would be great. Thanks!
HTML
<input type="text" value="hello"/>
JS
$scope.highlightText = function() {
$("input[type='text']").on("click", function() {
$(this).select();
});
https://plnkr.co/edit/b7TYAFQNkhjE6lpRSWTR?p=preview

You need to actually call your method at the end of controller, otherwise the event is not bound.
https://plnkr.co/edit/a0BlekB8qTGOmWS8asIx?p=preview
... other code ...
$scope.highlightText = function () {
$("input[type='text']").on("click", function () {
$(this).select();
var test = $(this).parent();
console.log(test);
});
$("textarea").on("click", function () {
$(this).select();
});
};
$scope.highlightText();
};

To select the text inside an input you would simply call this.select() from onclick like shown below
<input type="text" onclick="this.select()" value="hello"/>

jQuery change value of input and display it as text

I'm struggling with the following problem. I have input text element. I want a user to enter something there and then his value appears as a normal text (the input should disappear).
I searched for a few solutions but nothing worked for me. What I tried (whatever function I provide, I get no results, what should I provide to get the effect I described above and how to make it happen?):
$('input.modified').on('input', function(){
(this).append('<p>some</p>');
});
OR
$("input.modified").bind("propertychange change keyup paste input", function(){
$(this).append("<p>dgdgd</p>");
});
OR
$("input.modified").change(function(){
$(this).css("visibility","hidden");
}); //end change function
How to make functions like .on() or .change() work with my code?
thanks for all the answer, but I can't move your examples to my code :(
Please verify this fiddle what I'm missing:
[http://jsfiddle.net/w6242/][1]

Check this DEMO
HTML:
<input class="modified" type="text"/>
<p></p>
JS:
$("input.modified").change(function(){
$('p').html($(this).val());
$(this).css("visibility","hidden");
});

check this
Fiddle
$("#in").focusout(function(e){
$("span").html(($("#in").val()));
$(this).hide();
});

Here a fiddle http://jsfiddle.net/keypaul/NsWC5/5/
HTML
<div id="wrapper">
<input type="text" id="writer" />
send
</div>
JQuery
$("#submit").click(function(e){
var txt = $("#writer").val();
$("#writer").fadeOut(400);
$("#submit").fadeOut(400, function(){
$("#wrapper").append('<div id="text">' + txt + '</div>').hide().fadeIn(600);
});
e.preventDefault();
});
If you need to do that with onther event (instead of a click submit) you can use onchange or focusout applied to your input element

At its simplest, assuming you really want to replace the input:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var p = $('<p />', {
text : this.value
});
$(this).replaceWith(p);
}
});
JS Fiddle demo.
Or, to insert an adjacent element and simply hide the input:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var span = $('<span />', {
text : this.value
});
$(this).hide().after(span);
}
});
JS Fiddle demo.
The above jQuery works with the following demonstrative HTML:
<input id="demo" type="text" />
References:
after().
hide().
on().
replaceWith().

How to select value of input onClick?

I have a <input type="text"> and if user clicks inside it I want to make the content (value) of that box selected. How would I do that?

<input type="text" onclick="select()"/>

Try select method:
document.getElementById("myinput").onclick = function() {
this.select();
};

You can try following code inside a javaScript method, and call the method onClick event of the textbox...
function calledOnClick(){
document.getElementById('test').select();
}

You can try following jQuery code which automatically call on page load
<script>
$(document).ready(function(){
$('input').each(function(){
$(this).click(function() {
this.select();
});
});
$("#return_date").focus();
});
</script>

jQuery an alternative to .keyup function

I want to know alternative for .keyup function. Example
$(".color").keyup(function () {
var top_header = $("#top_header").val();
$("#top").css("background-color", top_header);
});
<input value="#121212" class="color" id="top_header" type="text" />
This code will change id='top' with a new background when we type to the input text.
Now I change it to jscolor to the field. So when we click to the text input will shown color generator.
Question
What should I replace .keyup(function () to make make color change instantly without to have enter?
Example without using jscolor http://jsfiddle.net/5dsXT/

You're looking for the onChange event try replacing the .keyup() function with .change().
Example
$(document).ready(function () {
$(".color").change(function () {
var top_header = $("#top_header").val();
$("#top").css("background-color", top_header);
});
});
<input value="#121212" class="color" id="top_header" type="text" />
Edit You can see an example of them using the event on their "tweaking" page.

I'm not exactly sure what you're asking, but if you want to bind two events to that texbox you can try this:
$(document).ready(function () {
$("#top_header").bind("keyup focus", function() {
$("#top").css("background-color", $(this).val());
});
});
http://jsfiddle.net/5dsXT/2/
If you want to handle initial page load, focus, and keyup you can do this:
$(document).ready(function () {
SetColor();
$("#top_header").bind("keyup focus", SetColor);
function SetColor()
{
$("#top").css("background-color", $("#top_header").val());
}
});
http://jsfiddle.net/5dsXT/1/