I'm in the begin fase of learning JS. I'm trying to make a page were the user can put numbers in a text field. The user can press enter to add another number. When the user pressed enter the input field need to be cleared
The amounts entered must be added together and their total must be shown in a second text box.
my HTML:
<input type="text" id="input">
<p>Uw totaal:</p>
<input type="text" id="output">
My JS:
input = document.getElementById("input");
input.onkeypress = function(event) {
ceckKey(event);
};
function ceckKey(e) {
// check for enter: e.key is for Firefox
// if true, make input empty
if (e.keyCode == 13 || e.key == 13) {
input.value = "";
}
var number = +input.value;
return number;
}
var total = 0
total += checkKey();
document.getElementById("output").value = total;
The keypress works in every browser. The problem is that i cannot sum the numbers. If i put it in the keypress function, the number will be cleared everytime you hit enter again.
I hope you guys can help!
Get the value before your clear it.
var input = document.getElementById("input");
var output = document.getElementById("output");
var total = 0;
input.onkeypress = function(e) {
if (e.keyCode == 13 || e.key == 13) {
total += +input.value;
output.value = total;
input.value = "";
}
};
<input type="number" id="input">
<p>Uw totaal:</p>
<input type="number" id="output">
Give this a shot -
var total = 0;
input = document.getElementById("input");
output = document.getElementById("output");
input.onkeypress = function(e) {
total = total + input.value * 1;
if(e.keyCode == 13) {
input.value = "";
}
output.value = total;
};
<input type="text" id="input">
<p>Uw totaal:</p>
<input type="text" id="output">
And hey, welcome to JS!
you clear your input field too early.
var number = 0
function ceckKey(e) {
// check for enter: e.key is for Firefox
// if true, make input empty
if (e.keyCode == 13 || e.key == 13) {
number += input.value;
input.value = "";
}
return number;
}
document.getElementById("output").value = number;
note that your number variable may not be declared inside of the checkKey function. Greetings
You are updating the output element outside of the ceckKey function.
This update IS not automatic. You must trigger it.
Also, check carefully that function. Callbacks can return a value but using the dame function for a callbacks and getting that output contents does not look good.
You are clearing the value of input before calculating the total. I have updated your code little bit to work as you intended.
input = document.getElementById("input");
output = document.getElementById("output");
input.onkeypress = function(event) {
checkKey(event);
};
function checkKey(e) {
// check for enter: e.key is for Firefox
// if true, make input empty
if (e.keyCode == 13 || e.key == 13) {
// Note : in the begining the output text box is empty, so while output is empty i have assign 0 as its value.
outputValue = (output.value == '') ? 0 : output.value;
total = parseInt(outputValue) + parseInt(input.value);
input.value = "";
// To update the total in output text box
document.getElementById("output").value = total;
}
}
Related
I have a form that has two fields stationerytype and stationeryrqstqty.The stationeryrqstqtyfield of the form accepts the number. The minimum number which can be entered in this field(QTY) depends upon the value of the stationerytype field i.e. If the stationerytype field value is 'pencil' then the minimum value property of the stationeryrqstqty field should be 5 and if it is 'notepad' then the minimum property of the stationeryrqstqty field should be 10. I am doing it by the given code but it's not working.it gives always 1,2,3.......
<td>
<input type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off" required>
</td>
<td>
<input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required >
</td>
<script>
var options = document.querySelectorAll(".option1");
options.forEach(function(option) {
option.addEventListener("change", function() {
calculatingMinimunQuantity(option);
});
});
function calculatingMinimunQuantity(option) {
var minimum = 0;
var value = option.value;
if (value === "PENCIL") {
minimum = "5";
step1="5";
} else if (value === "NOTEPAD") {
minimum = "10";
step1="10";
}
// getting the quantity input field
option.nextElementSibling.setAttribute("min", minimum);
option.nextElementSibling.setAttribute("step", step1);
}
</script>
You can fix the issue by usin a keyup event instead of a change event:
var options = document.querySelectorAll(".option1");
options.forEach(function(option) {
option.addEventListener("keyup", function() {
calculatingMinimunQuantity(option);
});
option.nextElementSibling.addEventListener('change', evt => {
if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
});
});
function calculatingMinimunQuantity(option) {
var minimum = 0, step1 = 0;
var value = option.value;
if (value === "PENCIL") {
minimum = "5";
step1="5";
} else if (value === "NOTEPAD") {
minimum = "10";
step1="10";
}
// getting the quantity input field
option.nextElementSibling.setAttribute("min", minimum);
option.nextElementSibling.setAttribute("step", step1);
}
Note: the event listener is used to ensure the user doesn't enter a value less than the min value
I'm creating a numeric input mask/value pair by showing the user a text input to give it several stylings (i.e. dividing thousands with a comma), and storing the real value to be sent to the form in a hidden number input.
Right now I'm noticing that editing the value of the visible input updates the selection index to the very end, which is unintuitive when you edit the input from i.e. the middle of the value. I understand that the position has been lost since the value is being completely rewritten, but how can I manually keep track of it to update it back, given that the on.('input') event handler triggers "after" the value has already changed and the keydown event happens before the modification takes place?
$("#foo").on('change paste input mouseup', function() {
const validation_decimals = 3 //allowed decimal places
const $mask = $('#foo')
const $value = $('#baz')
let hasDot = $mask.val().includes('.')
let nValue = $mask.val().replace(/[a-zA-Z]/g, "").replace(/[!¡##$%^&\/+*()=¿?":;\[\]\-_~`\\{}'|<>]/g, "")
// only one period allowed
if (hasDot) {
if ($mask.val().match(/\./g).length > 1) {
let newVal = $mask.val()
const lastDot = newVal.lastIndexOf('.')
newVal = newVal.slice(0, lastDot) + newVal.slice(lastDot + 1)
$mask.val(newVal)
}
}
$value.val(parseFloat($mask.val().replace(/,/g, "")))
// adding comma-based thousands grouping
let [integers, decimals] = $value.val().toString().split('.')
if (integers.length > 3) {
for (let iReverse = -3; iReverse > -integers.length; iReverse -= 4) {
integers = integers.slice(0, iReverse) + ',' + integers.slice(iReverse)
}
}
let fValue = integers
if (hasDot) {
fValue += '.'
}
if (decimals !== undefined) {
fValue += decimals
}
$('#foo').val(fValue)
})
// preventing more decimal places than allowed and user-inputted commas.
$("#foo").on('select click keydown', function(e) {
let selStart = e.target.selectionStart;
let selEnd = e.target.selectionEnd;
const isComma = e.keyCode == 188
const isNumber = (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)
const validation_decimals = 3
if ($(this).val().includes('.')) {
const value = $(this).val()
const decimals = value.split('.')[value.split('.').length - 1]
const decimalLengthReached = decimals.length == validation_decimals
const selectionBeforePeriod = selStart < value.indexOf('.') || selEnd > selStart
if (isNumber && decimalLengthReached && !selectionBeforePeriod) {
e.preventDefault()
}
}
if (isComma) {
e.preventDefault()
}
})
.input-group {
margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form-group'>
<label for='foo'>User Field (type here)</label>
<div class="input-group mb-3">
<input type="text" class="form-control" id='foo' step='0.01' aria-label="Amount (to the nearest dollar)">
</div>
<label for='baz'><em>Hidden field</em></label>
<div class="input-group mb-3">
<input type="number" id='baz' aria-label="Amount (to the nearest dollar)" step='0.1'>
</div>
</div>
You can use the selectionStart property of the input fields to determine where the caret was before you completely rewrite the input field.
document.querySelector("#my-input").addEventListener("change", function() {
// Get the position of the caret before you rewrite the input field
let caretPosition = document.querySelector("#my-input").selectionStart;
// Rewrite the input field here
// Put the caret back to where it was
document.querySelector("#my-input").selectionStart = caretPosition;
});
I want to replace a number over 100 with commas. Like 1000 to 1,000 and 1000000 to 1,000,000 etc. in HTML. I have found the code on here to do so but it only works with predetermined numbers being passed. I don't want it to work for a predetermined number but for any number typed into the box.
<label for="turnover">Estimated Monthly Card Turnover:</label><br />
<span>£ </span><input type="text" id="turnover" maxlength="11"
name="turnover" size="10" required>*
<br /><br />
<script type="text/javascript">
$('#turnover').keydown(function(){
var str = $(this).val();
str = str.replace(/\D+/g, '');
$(this).val(str.replace(/\B(?=(\d{3})+(?!\d))/g, ","));});
</script>
I created a solution using pure javascript.
function onChange(el) {
var newValue = el.value.replace(/,/g, '');
var count = 0;
const last = newValue.substring(newValue.length - 1, newValue.length); // last input value
// check if last input value is real a number
if (!isNumber(last)) {
el.value = el.value.substring(0, el.value.length - 1);
return;
}
newValue = newValue.split('')
.reverse().map((it) => {
var n = it;
if (count > 0 && count % 3 == 0) n = n + ',';
count++;
return n;
})
.reverse().join('')
el.value = newValue
// document.getElementById('value').innerHTML = newValue
}
function isNumber(input) {
return input.match(/\D/g) == undefined;
}
<label>Number</label>
<input id="numbers" onkeyup="onChange(this)">
There are a couple of issues with your code:
It runs once when the page loads, not after that. I added a button to fix that.
The id used in your code does not match the actual id of the input field.
Input fields must be read and written using .val(). .text() works only for divs, spans etc.
Note that the conversion now works one time, after that it fails to properly parse the new text which now contains the comma(s).
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function ShowComma() {
console.clear();
var val = parseInt($("#comma").val());
console.log(val);
val = numberWithCommas(val);
console.log(val);
$("#comma").val(val);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="turnover">Estimated Monthly Card Turnover:</label><br />
<span>£ </span><input type="value" id="comma" maxlength="30" name="turnover" size="10" required>*
<button onclick="ShowComma()">Show Comma</button>
To finalise this I have putgetElementById functions in so that this will work with a wordpress contact form 7. This must be with a text field though as it will not work with the number field as it will now accept commas:
<script>
document.getElementById("averagetrans").onkeyup = function() {onChange(this)};
document.getElementById("Turnover").onkeyup = function() {onChange(this)};
</script>
<script type="text/javascript">
function onChange(el) {
var newValue = el.value.replace(/,/g, '');
var count = 0;
const last = newValue.substring(newValue.length - 1, newValue.length); // last input value
// check if last input value is real a number
if (!isNumber(last)) {
el.value = el.value.substring(0, el.value.length - 1);
return;
}
newValue = newValue.split('')
.reverse().map((it) => {
var n = it;
if (count > 0 && count % 3 == 0) n = n + ','; // put commas into numbers 1000 and over
count++;
return n;
})
.reverse().join('')
el.value = newValue
// document.getElementById('value').innerHTML = newValue
}
function isNumber(input) {
return input.match(/\D/g) == undefined;
}
</script>
I want to mask the text in an input box without changing the actual value. I can not use any plugins.
I am currently doing this - but as you can see the issue is that the actual value is changed on submit. How can I just change the display value?
$("input[name='number']").focusout(function(){
var number = this.value.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
this.value = number;
}
You need two inputs
Two inputs should get the job done. One input will contain the masked text and the other will be a hidden input that contains the real data.
<input type="text" name="masknumber">
<input type="text" name="number" style="display:none;">
The way I approached the masking is to build a function for both masking and unmasking the content so everything stays uniform.
$("input[name='masknumber']").on("keyup change", function(){
$("input[name='number']").val(destroyMask(this.value));
this.value = createMask($("input[name='number']").val());
})
function createMask(string){
return string.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
}
function destroyMask(string){
return string.replace(/\D/g,'').substring(0,8);
}
Working JSFiddle
or also
<input type="text" onkeypress="handleMask(event, 'data: 99/99/9999 99:99 999 ok')" placeholder="data: ok" size=40>
with
function handleMask(event, mask) {
with (event) {
stopPropagation()
preventDefault()
if (!charCode) return
var c = String.fromCharCode(charCode)
if (c.match(/\D/)) return
with (target) {
var val = value.substring(0, selectionStart) + c + value.substr(selectionEnd)
var pos = selectionStart + 1
}
}
var nan = count(val, /\D/, pos) // nan va calcolato prima di eliminare i separatori
val = val.replace(/\D/g,'')
var mask = mask.match(/^(\D*)(.+9)(\D*)$/)
if (!mask) return // meglio exception?
if (val.length > count(mask[2], /9/)) return
for (var txt='', im=0, iv=0; im<mask[2].length && iv<val.length; im+=1) {
var c = mask[2].charAt(im)
txt += c.match(/\D/) ? c : val.charAt(iv++)
}
with (event.target) {
value = mask[1] + txt + mask[3]
selectionStart = selectionEnd = pos + (pos==1 ? mask[1].length : count(value, /\D/, pos) - nan)
}
function count(str, c, e) {
e = e || str.length
for (var n=0, i=0; i<e; i+=1) if (str.charAt(i).match(c)) n+=1
return n
}
}
A more robost version of accepted answer without having two input's which may pollute transmitted form fields and also being aware of key-repetitions and other quirks when pressing a key too long:
<input type="text" name="masknumber" data-normalized="">
and
$("input[name='masknumber']").on("input", function(){ // input event!
let n = destroyMask(this.value);
this.setAttribute("data-normalized", n); // saved as attribute instead
this.value = createMask(n);
})
function createMask(string){
return string.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
}
function destroyMask(string){
return string.replace(/\D/g,'').substring(0, 7); // 7 instead of 8!
}
JSFiddle
$(document).ready(function(){
$("input").keyup(function(){
if($(this).val().split(' ').length == 10){
alert();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Enter your name: <input type="text">
If the input is 1 2 3 4 5 6 7 8 9 the alert fired, I know it included the space. But how to stop user from adding more character (even space) when the limit is reached?
The problem can easily be simplified to disabling the spacebar when the max word count is reached:
this should work: http://jsfiddle.net/wznervgz/6/
<input data-max-words="10" />
js:
$('input[data-max-words]').on('keydown', function (e) {
var $txt = $(this),
max = $txt.data('maxWords'),
val = $txt.val(),
words = val.split(' ').length;
if (words === max && e.keyCode === 32)
return false;
});
Hope this will help you.
<textarea name="txtMsg" id="word_count" cols="1" rows="1"> </textarea>
<span style="padding-left:10px;">Total word Count :
<span id="display_count" style="font-size:16px; color:black;">0</span> words &
<span id="count_left" style="font-size:16px; color:black;">2</span> words left.</span>
<br>
jquery code:
var max_count = 2;
$(document).ready(function () {
var wordCounts = {};
$("#word_count").keyup(function () {
var matches = this.value.match(/\b/g);
wordCounts[this.id] = matches ? matches.length / 2 : 0;
var finalCount = 0;
$.each(wordCounts, function (k, v) {
finalCount += v;
});
var vl = this.value;
if (finalCount > max_count) {
vl = vl.substring(0, vl.length - 1);
this.value = vl;
}
var countleft = parseInt(max_count - finalCount);
$('#display_count').html(finalCount);
$('#count_left').html(countleft);
am_cal(finalCount);
});
}).keyup();
Fiddle link: http://jsfiddle.net/aVd4H/32/
Thank you.
Think about storing the value of the input after each keyup and if the wordcount is greater than your limit just setVal back to the "previously" saved amount. So it would start off as var previousVal = ''; and then increment accordingly until the comparison returns true, set the val and return.
Demo: http://jsfiddle.net/robschmuecker/wznervgz/1/
$(document).ready(function(){
var previousValue = '';
$("input").keydown(function(){
if($(this).val().split(' ').length >= 10){
alert();
$(this).val(previousVal);
return;
}
previousVal = $(this).val();
});
});
You can try this:
$("input").keydown(function(e){
if($(this).val().split(' ').length == 10){
alert();
e.preventDefault();
return false;
}