can someone help me with my code? everytime I type in my textbox it create multiple textbox but I want to create a program that everytime I hit enter key it create another textbox.
here's my code:
<script language="javascript">
function changeIt() {
var i = 1;
my_div.innerHTML = my_div.innerHTML +"<br><input type='text' name='mytext'+ i><br/>"
}
</script>
<body>
<form name="form" action="post" method="">
<input type="text" name=t1 onkeydown="changeIt()">
<div id="my_div"></div>
</form>
</body>
See this fiddle
What you have done in your code was to create a textfield whenever a key press occurs..To create a textfield only when enter key is pressed you have to check the keycode of the pressed button.
So, Please change your JS a little bit as follows..
function changeIt(event) {
var key = event.which || event.keyCode;
if (key == '13') {
var i = 1;
my_div.innerHTML = my_div.innerHTML + "<br><input type='text' name='mytext'+ i><br/>"
}
}
Please make sure that you replace your <input> also as follows
<input type="text" name=t1 onkeydown="changeIt(event)">
Please read more about keyCode in the docs.. Also, if you want to find out the keyCode of any button, please check keycode.info
Your current JS function is being execute every time a button is pressed because you're use the event onkeydown which will capture any key pressing.
Do this:
<script>
var changed = function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
/* YOUR EXECUTION CODE */
}
}
</script>
<form name="form" action="post" method="">
<input type="text" name="t1">
<div id="my_div"></div>
</form>
You are creating a new <input> everytime any key is pressed. Instead, you should check if Enter was pressed using e.key or e.code (note both e.which and e.keyCode are depreacted).
Also, consider using Node.appendChild() instead of innerHTML. Otherwise, every time you add a new <input>, all the existing ones will be re-created and lose their values.
const input = document.getElementById('input');
const inputs = document.getElementById('inputs');
input.addEventListener('keydown', ({ key }) => {
if (key !== 'Enter') return;
const newInput = document.createElement('input');
newInput.type = 'text';
newInput.name = `mytext${ inputs.children.length }`;
inputs.appendChild(newInput);
});
input {
display: block;
}
<form name="form" action="post" method="">
<input type="text" id="input">
<div id="inputs"></div>
</form>
If you need to check KeyboardEvent's properties values such as e.key, e.code, e.which or e.keyCode, you can use https://keyjs.dev:
Disclaimer: I'm the author.
Related
how to get the search input to recognize that there is a string of input?
the code below works but even without entering any input it still does the search if I click search or enter. In other words even if the search input is blank it still searches. This is just a project, anyone has any ideas?
<input type="text" id="textInput" name="" class="query">
<script>
let query = document.querySelector('.query');
let searchBtn = document.querySelector('.searchBtn');
searchBtn.onclick = function(){
let url = 'https://www.google.com/search?q='+query.value;
window.open(url,'_self');
}
</script>
<script>
var input = document.getElementById("textInput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("searchButton").click();
}
});
</script>
Simply check for a (valid) length, either greather than zero or greater than maybe three characters for any meaningful results (depends on your searches).
<script>
let query = document.querySelector('.query');
let searchBtn = document.querySelector('.searchBtn');
searchBtn.onclick = function(){
if(query.value.trim().length){ // maybe length>3 ?
let url = 'https://www.google.com/search?q='+query.value;
window.open(url,'_self');
}
}
</script>
<script>
var input = document.getElementById("textInput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("searchButton").click();
}
});
</script>
You have to check if the value of input exists or it is not empty.
You can also check:
input.value.length
input.value !== ""
input.value
let query = document.querySelector('.query');
let searchBtn = document.querySelector('.searchBtn');
searchBtn.onclick = function() {
let url = 'https://www.google.com/search?q=' + query.value;
window.open(url, '_self');
}
var input = document.getElementById("textInput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13 && input.value) {
event.preventDefault();
document.getElementById("searchButton").click();
}
});
<input type="text" id="textInput" name="" class="query">
<button class="searchBtn">Search</button>
Working Fiddle
If you wrap your inputs in a <form></form> you can use HTML5's built in validation.
In my example:
pattern="[\S]+" means all characters except space are valid
required means the input length must be at least 1 valid character
Also, I'm toggling the button's disabled property based on the input's validity. In my opinion it makes for a better user experience letting the user know something is incorrect BEFORE clicking the button.
let button_search = document.querySelector('button.search');
let input_query = document.querySelector('input.query');
button_search.addEventListener('click', function() {
if (input_query.validity.valid) {
window.open('https://www.google.com/search?q=' + input_query.value, '_self');
}
});
input_query.addEventListener('keyup', function(event) {
button_search.disabled = !input_query.validity.valid; //visual indicator input is invalid
if (event.keyCode === 13) {
button_search.click();
}
});
<form>
<input class="query" pattern="[\S]+" required>
<button class="search" disabled>Search</button>
</form>
Last thought, unless there is a specific reason you need to run your code in separate scopes, you can put all of your code in a single <script></script>
I am making a search engine and I would like to know if you can make a changeable href and instead of a button have just a textbox.
Here is what I have:
so can I use a different way that let's me just be able to hit enter instead let me know please
<input id="input" type="url"></input>
<button id="link button"><a id="link" style="text-decoration: none; color: inherit;" href="" TARGET="_BLANK">enter</a></button>
<script src="script.js">
var linkButton = document.getElementById("link button")
linkButton.onclick = function(){
var input = document.getElementById("input").value
document.getElementById("link").setAttribute("href", "http://"+input)
}
</script>
Use this, I hope it resolves the issue:
Check here: https://jsfiddle.net/wh3jefz2/2/
document.getElementById('input').onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
var input = document.getElementById("input").value
window.open("http://"+input);
}
}
Another alternative is to use a form
function myfunction(){
var inputbox = document.getElementById('inputval');
document.querySelector('#check').innerText = inputbox.value;
window.open('http://'+inputbox.value);
}
<form onsubmit="myfunction();return false;">
<input name="value" id="inputval"/>
<p id="check"></p>
</form>
I have an input area where a value has been preset. I would like to make it so that on page-load the "enter" button is pressed on the keyboard to submit the value.
Here is the code:
$('#login-input').keypress(function(e) {
if (e.which === 13 && $(this).val() != '') {
player_name = $(this).val();
logged = 1;
}
<div id="console_content">
<label>Username:</label><input maxlength="10" class="textarea" id="login-input" autocomplete="off" value="Anonymous" type="text">
</div>
A solution where I would not need to press enter and the value is submitted is also welcome!
I guess code below would work.
$('#login-input').keypress(function(e) {
if (e.which === 13 && $(this).val() != '') {
console.log('triggered')
player_name = $(this).val();
logged = 1;
}
})
const event = new Event('keypress')
event.which = 13
document.querySelector('#login-input').dispatchEvent(event)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="console_content">
<label>Username:</label><input maxlength="10" class="textarea" id="login-input" autocomplete="off" value="Anonymous" type="text">
</div>
The doc
If you want it to run after page loaded, use onload event. The solution may look like this:
<script>
function f() {
// Test it:
// alert("Hello, page loaded!");
player_name = $('.some_place').val();
logged = 1;
}
</script>
<body onload="f()">
If you do want user to have a glimpse on your pre-filled login form and inform about what is happening, you may make a delay with setTimeout function, which will fire in 0.5 sec after onload event happened.
<script>
function f() {
$('#some_element').text('Signing you in...');
player_name = $('.some_place').val();
logged = 1;
}
</script>
<body onload="setTimeout(f, 500)">
Or you can call the event handler with a faked keypress like this:
function kpress(e) {
if (e.which === 13 && $(this).val() != '') {
player_name = $(this).val();
logged = 1;
console.log(player_name,logged);
}
}
kpress.call($('#login-input').keypress(kpress),{which:13});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="console_content">
<label>Username:</label><input maxlength="10" class="textarea" id="login-input" autocomplete="off" value="Anonymous" type="text">
</div>
I use the output from the jQuery event binding as the object context for the Function.prototype.call() method and add a "simplified" event object as {which:13}.
HTML:
<form name="prints" method="post" action="">
<input type="text" name="quantity_914" id="quantity_914" value="1" style="width:20px;" onblur="prints_change_quantity(event, this);" onkeyup="return prints_change_quantity(event, this); return false;" />
</form>
Javascript:
function prints_change_quantity(e, element)
{
var pid = element.id.replace('quantity_');
var code = (e.keyCode ? e.keyCode : e.which);
if("blur" == e.type || ("keyup" == e.type && code == 13))
{
e.preventDefault();
console.log(element.value);
}
return false;
}
Cancelling a keydown event won't stop a form from being submitted. You'll need to use keypress or keyup instead.
use the key press event rather using keyup.
<form action="#">
<input type="text" name="txt" onkeypress="handle" />
</form>
<script>
function handle(e){
if(e.keyCode === 13){
alert("Enter was pressed was presses");
}
return false;
}
</script>
If you want to use your existing function and don't want your form to submit you can just use jquery and prevent the form from submitting with your existing function.
Example
$(document).ready(function(){
$("#prints").submit(function (e) {
e.preventDefault(); // this will prevent from submitting the form.
});
});
I added an id of prints to the form alternatively you could use a name selector or some other selector...
Alternatively if you want to be able to submit the form at some point you could just add a jquery handler for keypress on the form and if its the return key cancel it.
$('#prints').keypress(function(e){
if ( e.which == 13 ) e.preventDefault();
});
Example 2
By default keyDown event is triggered when you hit enter for a html form. Whenever you attach an event to onkeyUp attribute the form takes the enter key action and submits the form as it has no effect, however if you explicitly specify onkeyDown event then your return prints_change_quantity(event, this); gets called and hence the form won't get submitted . Change your html code to call the JavaScript function as shown below:
<form name="prints" method="post" action="">
<input type="text" name="quantity_914" id="quantity_914" value="1" style="width:20px;" onblur="prints_change_quantity(event, this);" onkeydown="return prints_change_quantity(event, this); return false;" />
</form>
Hope this helps.
I have a simple situation here. lets face html code first =>
<form name="geoKey" method="post" action="index.php">
<fieldset class="gKey">
<legend><input type="checkbox" name="checkUncheck" id="checkUncheck"></legend>
<textarea name="txt" id="txt" cols="34" rows="5"></textarea>
</fieldset>
</form>
and here is javascript =>
function keyPress(e){
var key;
var box = document.getElementById("checkUncheck");
if (window.event){
key = event.keyCode;
} else {
key = e.which;
}
if (key==192){
(box.checked) ? box.checked=false : box.checked=true;
}
}
window.onload = function(){
document.onkeyup = keyPress;
};
so , like you see guys when it is pressed key (numbered 192) checkbox is checking if it is not checked and otherwise too (this is everything working nicely) , but here is a issue => I want that if cursor is focused on textarea and pressed that key (192) in textarea doesn't write anything . please help , thanks :)
Use onkeydown instead and prevent the default browser action by using e.preventDefault:
function keyPress(e){
var key;
var box = document.getElementById("checkUncheck");
if (window.event){
key = event.keyCode;
} else {
key = e.which;
}
if (key==192){
e.preventDefault(); // <-- prevent default action
(box.checked) ? box.checked=false : box.checked=true;
return false;
}
}
window.onload = function(){
document.onkeydown = keyPress;
};
JSFiddle demo.