Develop Reference

input cannot be empty but console.log is still running

The code is works but how can I stop the console when input empty is? Console side responds in all conditions.
<label>Enter your name: </label> <br>
<input type="text" id="myText"> <br>
<button type="button" onClick="click()"id="myButton">Submit</input>
document.getElementById("myButton").onclick = function() {
var myName = document.getElementById("myText").value;
console.log("Hello", myName);
}
var input = document.getElementById("myText");
addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myButton").click();
if (document.getElementById("myText").value.length == 0) {
alert("You must write something!")
return;
}
}
});

The console.log call is inside the onclick function, which you call before you check whether there was any content in the input.
It would make more sense to do your if statement inside the onclick function to get the desired result.
document.getElementById("myButton").onclick = function(){
var myName = document.getElementById("myText").value;
if (myName.length == 0) {
console.log("Hello",myName );
alert("You must write something!")
}
}
var input = document.getElementById("myText");
addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myButton").click();
}
});

Because you are checking if myText is empty after print it to console.
I think this should be work :
if (event.keyCode === 13) {
if(document.getElementById("myText").value.length == 0)
{
alert("You must write something!")
return ;
}else{
event.preventDefault();
document.getElementById("myButton").click();
}
}

We need a couple of changes
// JavaScript code needs to run after dom has fully mounted
window.addEventListener('DOMContentLoaded', (event) => {
const myButton = document.getElementById(“myButton”);
const myText = document.getElementById(“myText”);
// event listeners
myButton.addEventListener(“click”, eventForButton);
myText.addEventListener(“keydown”, (e)=> {
if (event.keyCode === 13) {
e.preventDefault();
// if input doesn’t have a value some browsers return null
// that’s why is better to have a falsely comparison
if(!e.target.value) {
alert("You must write something!")
return ;
}
// you need to click the button after the validation, not before as you have it
myButton.click();
}
});
});

When user enters text in textbox then append a prefix value

I have a textbox which needs to be filled with website URL. So when user places the cursor in the textbox then the textbox should prefill with "http://" (Not a placeholder).
If the user does not enter anything and moves to the next textbox then the textbox have empty value
If the user fills the textbox then the value is unchanged
I tried below Javascript code but did not work:
if (document.activeElement.id == 'input-textbox-id' && !document.activeElement.value) {
document.querySelector("#input-textbox-id").value="http://";
} else if (document.activeElement.id != 'input-textbox-id' && (!document.activeElement.value || document.activeElement.value == 'http://')) {
document.querySelector("#input-textbox-id").value="";
}

You can use the focus and blur events for this.
Assuming that the variable textBox contains the reference to your textBox element, you can use the following code:
let textBox = document.getElementById("a");
textBox.addEventListener("focus", function() {
if (!this.value) {
this.value += "http://";
}
});
textBox.addEventListener("blur", function() {
if (this.value == "http://") {
this.value = "";
}
});
<input type="text" id="a">

You will need to attach event listener by using addEventListener. Events you need: focus and focusout.
We add .http-prefill class for all inputs. We iterate over inputs array and attach event.
Please do not forget to remove eventListener when you are done eg. you unload the form.
To do so, just copy the code for adding listeners and replace addEventListener with removeEventListener.
inputs.forEach(function(input) {
input.removeEventListener('focus', onFocus);
input.removeEventListener('focusout', onFocusOut);
});
Example code:
var fillValue = 'http://';
var onFocus = function() {
this.value = fillValue;
}
var onFocusOut = function() {
if (this.value === fillValue) {
this.value = '';
}
}
var inputs = document.querySelectorAll('.http-prefill');
inputs.forEach(function(input) {
input.addEventListener('focus', onFocus);
input.addEventListener('focusout', onFocusOut);
});
.http-prefill {
width: 100%;
margin-bottom: 5px;
}
<input class="http-prefill" name="input-0" />
<input class="http-prefill" name="input-1" />
<input class="http-prefill" name="input-2" />
<input class="http-prefill" name="input-3" />

you can use some key events like onKeyDown and when keydown you can get hold of old value and append it with new value.
let keyPressed = true
function onKeyDown(event) {
if(keyPressed && event.keyCode !== 8)
{
keyPressed = false;
let oldvalue = document.getElementById('input-textbox-id').value;
document.getElementById('input-textbox-id').value = "http://"+oldvalue
}
if(!document.getElementById('input-textbox-id').value)
{
keyPressed = true;
}
}
here is working code. http://jsbin.com/zoxiwokepi/edit?html,output

jQuery inline edit return key

I've got a working inline edit script which lets the user edit his or her name.
But it currently does not "save" when the user hits the enter key
The script:
<span class="pageTitle" id="username">Visitor 123123981203980912 <span class="iconb" data-icon=""></span></span>
// Inline edit
$.fn.inlineEdit = function(replaceWith, connectWith) {
$(this).hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$(this).click(function() {
var elem = $(this);
elem.hide();
elem.after(replaceWith);
replaceWith.focus();
replaceWith.blur(function() {
if ($(this).val() != "") {
connectWith.val($(this).val()).change();
elem.html($(this).val() + ' <span class="iconb" data-icon=""></span>');
}
$(this).remove();
elem.show();
});
});
};
var replaceWith = $('<input name="temp" type="text" class="inlineEdit" />'),
connectWith = $('input[name="hiddenField"]');
$('#username').inlineEdit(replaceWith, connectWith);
How can i make the above also react when the enter key is hit?

You need to detect the enter press and do the same thing in blur function. Add the following to your js. Demo
replaceWith.keypress(function(e) {
if(e.which == 13) {
if ($(this).val() != "") {
connectWith.val($(this).val()).change();
elem.html($(this).val() + ' <span class="iconb" data-icon=""></span>');
}
$(this).remove();
elem.show();
}
});

This should fire when the enter key is pressed inside the input:
$('#username').live("keypress", function(e) {
if (e.keyCode == 13) {
// action here
}
});

You can call the same function on keydown and check for e.keyCode for enter key which is 13..a fiddle would be helpful..
Also check this link
Thanks,
Hardik

Active a function when Key hit/pressed in InputBox in Javascript?

I want when a user will hit ENTER key in INPUT BOX a function will be activate. Something like below:
if (ENTERKEY is Pressed in INPUTBOX){
Function(){....
}
};
This is Input box:
<input class="form-control" type="text" id="second_gear"/>
to trigger this function after hitting the ENTER key:
jump = function () {
//do...........
//do.....
}

Try this:
$( "#INPUTBOX" ).focus(function() {
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code here
return false;
}
return true;
});

Why input value can not be changed when pressing escape

I have an input (outside form) that captures name of an image. User should fill in a new name and hit enter. Ajax callback renames the image. This works.
I'd like to add ability to 'reset' the input content when the user presses escape (#27). But I'm not able to fill the value of the input with my value.
The code is
<input id="escapeInput" value="this is test" /> <input type="button" id="setDetaultToEscapeInput" value="Set default" />
jQuery(document).ready(function() {
jQuery("#escapeInput").keydown(function(evt) {
if (evt.keyCode == 27) {
var input = jQuery(this);
input.val('some default value') // doesn't work
input[0].value = 'some default value 2'; // doesn't work
input.parent().append('changed');
}
});
jQuery("#setDetaultToEscapeInput").click(function() {
var input = jQuery("#escapeInput");
input.val('some default value') // works ok
});
});
The interesting thing is that if I test e.g. for 'A' character ( if (evt.keyCode == 65)), the code works.
Any idea how to handle it? It doesn't work only in FF (Opera and IE8 are OK).

Try using the keyup event instead.
$(function() {
$("#escapeInput").keyup(function(e) {
if (e.keyCode == 27) {
$(this).val("some default value");
}
});
});

Try this
$(document).ready(function () {
$("#escapeInput").keypress(function (evt) {
var keycode = null;
if (evt.keyCode) {
keycode = evt.keyCode;
} else {
keycode = evt.which;
}
if (keycode == 27) {
$(this).val("some default value");
}
});
});