Develop Reference

Can I execute javascript when typing on a form?

I'm trying to find a way to trigger JavaScript when writing on an input
Thanks to everyone can help me
<input id="tophead-searchbar" class="searchbar" placeholder="Cerca" onfocus="mostraanteprimericerca();" onchange="Result1InnerHTML();">
Anyone that can help me?
function Result1InnerHTML() {
document.getElementById("Result1").innerHTML = "Cerca" + document.getElementById("tophead-searchbar").innerHTML + "su Nevent";
}
This is the function I want to call

To get the input as the user types, use the input event. This will also catch content which the user pastes in using
the mouse.
Also note that using onX attributes in your HTML is no longer good practice and should be avoided. Use unobtrusive event handlers attached within your JS code. This can be done using the addEventListsner() method.
Finally, input elements don't have any innerHTML, you need to read the value of the control instead.
const input = document.querySelector('#tophead-searchbar');
const output = document.querySelector('#result');
input.addEventListener('input', e => output.innerHTML = `Cerca ${input.value} su Nevent`);
<input id="tophead-searchbar" class="searchbar" placeholder="Cerca" />
<div id="result"></div>

You can use oninput event instead of onchange

onclick attribute vs onclick in script

Why the difference?
document.getElementById('click').onclick = a.replaceChild(c,b) --- replaces the element without me clicking the button
but onclick="a.replaceChild(c,b)" --- replaces the element only after the button is clicked
<div id="container">
<p id="welcome">no greetings yet</p>
<p id="products">oreo ice-cream</p>
</div>
<button id="click" **onclick="a.replaceChild(c,b)"**>CHANGE</button>
<script>
var a = document.getElementById('container');
var b = document.getElementById('welcome');
var c = document.createElement('h2');
c.id = 'new';
c.innerHTML = "WELCOME";
**document.getElementById('click').onclick = a.replaceChild(c,b);**
</script>

"document.getElementById('click').onclick" is just returning the state onClick whenever that line runs. Probably at page load time.
What you want to do is add an event listener which will listen for a change in the .onclick state. Then call your function with that.
This is what the onClick attribute is doing. Its generally advisable to use an event listener so you cna clearly separate your content from your JS logic.

You don't include the parentheses: you'd assign a parameterless function like document.getElementById('foo')=bar;, not like bar().
The way you're assigning it now actually runs it, which means you're assigning the return value from that function, not its name.
The parameters make it slightly trickier than just naming the function without parentheses.
document.getElementById("click").onclick = function(c, b){return a.replacechild(c,b);}
This'll do what you're looking for. JSFiddle
jQuery's .click() is a good alternative if you're interested in solutions that aren't pure basic javascript. Another may be adding an event listener instead in some cases.

Changing type of input is not working in IE8 with replaceChild

I am using below code to change input type onfocus and resetting it to text onblur. But this is not working
HTML
<input type="password" onfocus="changeInputType(this,'text')"
onblur="changeInputType(this,'password')">
JS
function changeInputType(oldObject, oType) {
var newObject = document.createElement('input');
var wrapper= document.createElement('div');
wrapper.innerHTML= oldObject.outerHTML.replace('type=password','type=text');
var newObject = wrapper.firstChild;
oldObject.parentNode.replaceChild(newObject,oldObject);
return newObject;
}
here is the fiddle. It is not working.

Assuming that you want to change the type attribute to password on blur and to text on focus, your code does not work for more than one reason.
You are missing the double quotes in your call to replace: replace('type=password','type=text')
When you call replaceChild the tag is removed and another blur event is triggered causing an error.
You are not using the oType variable anywhere.
Is easier to just use the type property like in the code below:
function changeInputType(oldObject, oType) {
oldObject.type = oType;
}

jQuery: on blur move cursor to textfield

I am creating a simple todolist function. I have a textfield like so:
<input type="text" class="textbox">
on blur take value and append to:
<div class="outerbox"></div>
as:
<div class="box">value from textbox</div>
This is done in jQuery, now after this event I want to move the cursor back into the .textbox (on blur).
How can this be done ?
I tried $('.textbox').focus(); which did'nt work..
Full code:
$(".textbox").blur(function(){
// 1. values
val = $(this).val();
time = '';
// 2. append
$(".outline").append('<div class="box"><div class="time">'+time+'</div>'+val+"</div>");
// 3. focus
setTimeout(function(){$('.textbox').focus();},0);
});

You probably need to break the callstack since you are trying to set focus on an element from inside it's blur event handler.
try to use
setTimeout(function(){$('.textbox').focus();},0);
it should do the trick for you

How can I process the new content in a text box after the onkeydown event?

I have a text input :
<input type="text" onkeydown="processText(this)" />
I have a processing function :
function processText(sender)
{
console.log(sender.value);
/// processing....
}
But then I check my value, its content hasn't been updated yet.
How can I do that?

Use onkeyup instead :
<input type="text" onkeyup="processText(this)" />

try onkeyup
http://www.w3schools.com/jsref/jsref_onkeyup.asp
Josh

If onkeyup is too late for your needs, you'll need to look at the key code of the event and then do something with the character that may or may not be added to the text box. Take a look at the DOM event reference or at the way jQuery handles it or the way Prototype handles it.