Develop Reference

How to run JavaScript on each letter entered in a search/text box field?

I have the following HTML
<form id="project-filter" class="aui ajs-dirty-warning-exempt">
<div class="project-filter-item">
<input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter- text text" value="">
</div>
</form>
This is a search box (text) field on the page.
I have a JS function that runs every time the page is loaded. The content of a page is like a table (headings and table data). However, the JS function doesn't run properly when something is entered in the Search box.
(Only the heading are executed, and the script doesn't run in the table body)
So I want the JS function to run every time a letter is entered.
For that I have tried to do the following, but its not working.
AJS.$('#project-filter-text').on('input', function() {
// Call my JS function.
setTimeout(removeProjectTypes, 0005);
return true;
});
And this:
AJS.$('#text').keyup(function(event) {
if(AJS.$('#text').val() == true) {
// Call my JS function here
}
});
Any suggestions on what should I do?

You can use the keyup event.
<form id="project-filter" class="aui ajs-dirty-warning-exempt">
<div class="project-filter-item">
<input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter- text text" value="">
</div>
</form>
$('#project-filter').on('keyup', function() {
console.log('This will run each time :)');
});
Try that :)

you could try
<input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter- text text" value="" onkeyup="myFunc()">
function myFunc()
{
alert('ok')
}

Use the onkeyup:
<form id="project-filter" class="aui ajs-dirty-warning-exempt">
<div class="project-filter-item">
<input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter- text text" value="" onkeyup=search()>
</div>
</form>
And add your function into the js file:
function search() {
console.log('run');
}

i don't know what ajs is, but with jquery you can use on method to wait for events
$('#project-filter-tex').on('keyup',function(){
// do something
});
sometimes i had the problem too, that jQuery.keyup() did not work. don't ask me why not.

$('#project-filter-text').keypress(function(e) {
if (e.which !== 0) {
console.log(String.fromCharCode(e.which));
//Logic here
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="project-filter" class="aui ajs-dirty-warning-exempt">
<div class="project-filter-item">
<input type="text" id="project-filter-text" placeholder="Contains text..." class="version-filter- text text" value="">
</div>
</form>

If, like me, you need something which triggeres every time a letter is entered, try oninput:
<textarea oninput="console.log(this.value)"></textarea>
keyup doesn't quite work. For example, try this MCVE:
<textarea onkeyup="console.log(this.value)"></textarea>
It works fine, if you just tap each key. But press and hold and you'll hit the issue: This triggers once per time the key is released, not per letter entered.

Transfer selected text from input textbox to textarea box?

I have no idea how to transfer text from each input textbox to text area line by line in JavaScript. Please help me! I'm beginner to programming and this is my first question :)

I won't give you the full answer, but this is pretty close, as the first input field is completely working. Now, it's up to you redefine this functions to let you handle an ARRAY of input fields accordingly.
var text1 = document.getElementsByTagName("input")[0];
var area = document.getElementsByTagName("textarea")[0];
function customFn(e) {
e.preventDefault();
area.innerHTML = text1.value;
text1.value = ""
}
document.getElementById("btn").addEventListener("click", customFn);
input {
display: block;
}
textarea {
display: block;
}
<div>
<input />
<input />
<input />
<input />
<button id="btn">transfer text</button>
<textarea rows="4" cols="50">
</textarea>
</div>

make placeholder text reappear when no text is in the input field

I have an input text field with a placeholder attribute. The placeholder disappears when I enter text, but I would like the the placeholder text to reappear after I click the button, "clear," or when the text field is empty. What are some ways I can achieve this?
Below is the code I have below. I tried
document.text.value = "hello";
but the text "hello" stays in the box when I start typing.
HTML
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>
Javascript
function(clearText) {
document.text.value = " ";
}

When the text field is empty, the placeholder will reappear automatically.
When the clear button is clicked, you can use onclick attribute on the button and define the function like this:
Implementation with pure JS:
<script>
function clearText() {
// we use getElementById method to select the text input and than change its value to an empty string
document.getElementById("my_text").value = "";
}
</script>
<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
Or you can use jQuery:
<script>
function clearText() {
$("#my_text").val("");
}
</script>
<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo

The easiest way to do it:
<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>

You were very close
HTML :
<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>
JavaScript :
clearText = function(){
document.getElementById('theText').value = "";
}
Demo : http://jsfiddle.net/trex005/7z957rh2/

There are multiple problems with your javascript syntax, starting from function declarations and ending with onclick event specification.
However, you were on the right way, and code below does the trick:
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">
However, it will only work if this is the only input box in your document. To make it work with more than one input, you should assign it an id:
<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">
and use "text2" and so on for other fields.

You should not forget to set "return false;"
document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;
if (key === 13) {
var text = this.value;
var object = document.getElementById('username_interface');
email = object.email;
username = object.username;
empty = /^\s+$/;
// function Send Message
this.value = "";
return false;
}else{
return true;
}}

Grabbing value and appending to textarea with Javascript?

I'm stuck!
I have this simple form:
<p><input type="text" name="hometown" id="hometown" size="22" /></p>
<p><textarea name="comment" id="comment"></textarea></p>
What I need is to append the input value from #hometown to textarea! It mustn't replace text already written there. In the best case, it'd just print at the end of whatever is written on ''submit'' click.
This is how far I've got with my Javascript, but nothing seems to work.
function addtxt(input) {
var hometown = document.getElementById('hometown').value;
var obj=document.getElementById(comment)
var txt=document.createTextNode(lol)
obj.appendChild(txt)
}

Textarea has value property to operate with its contents. Just use += to append text:
document.getElementById("comment").value +=
document.getElementById("hometown").value;

Try this
var oldval=$('#comment').val();
var newval=$('#hometown').val();
S('#comment').val(oldval+' '+newval);

Here's an example for you I've put on JSFiddle, using pure javascript and the onClick listener
http://jsfiddle.net/vyqWx/1/
HTML
<input type="text" name="hometown" id="hometown" size="22" />
<textarea name="comment" id="comment"></textarea>
<input type="submit" onClick="doMagic();">
JS
function doMagic(){
var homeTown = document.getElementById("hometown").value;
document.getElementById("comment").value += homeTown;
}

I Need A Javascript Code That Will Place The Word "Search" In An Empty DIV Value Tag Using The id=

I have no access to the html, I need JavaScript code that will add the word "Search" to the value="" that is blank for the input with id "ReportQuery".
How should I code it?
Here is the code below:
<div>
<input name="data[Report][query]" type="text" class="input_firm" value="" onChange="this.form.submit();" onClick="if( this.value == 'Search' ) { this.select(); }" id="ReportQuery" />
<input type="submit" value="Search" />
</div>

if its a div
$('div#idDiv').text('search');
if its an input (because you comment .value :S)
$('input#idDiv').val('search');

See this article, it comes with many examples and details:
http://www.javascript-coder.com/javascript-form/javascript-form-value.phtml
BTW, this is about the "direct" JS way, no jQuery involved, e.g.
oFormObject = document.forms['myform_id'];
oFormObject.elements["element_name"].value = 'Some Value';

$('#ReportQuery').val('Search');
http://jsfiddle.net/L9YS4/
A good place to start for learning jQuery:
http://jqfundamentals.com/