We Keep Coding

Input number section function only works one time

I have one function for the number input box come with + and - button on the sides, and copy the code in my shopify theme which I use. But that function only show one time. But I need those apply to all the product offers.
(function ($) {
$.fn.bootstrapNumber = function (options) {
var settings = $.extend({
upClass: 'default',
downClass: 'default',
center: true
}, options);
return this.each(function (e) {
var self = $(this);
var clone = self.clone();
var min = self.attr('min');
var max = self.attr('max');
function setText(n) {
if ((min && n < min) || (max && n > max)) {
return false;
}
clone.focus().val(n);
return true;
}
var group = $("<div class='input-group'></div>");
var down = $("<button type='button'>-</button>").attr('class', 'btn btn-' + settings.downClass).click(function () {
setText(parseInt(clone.val()) - 1);
});
var up = $("<button type='button'>+</button>").attr('class', 'btn btn-' + settings.upClass).click(function () {
setText(parseInt(clone.val()) + 1);
});
$("<span class='input-group-btn'></span>").append(down).appendTo(group);
clone.appendTo(group);
if (clone) {
clone.css('text-align', 'center');
}
$("<span class='input-group-btn'></span>").append(up).appendTo(group);
// remove spins from original
clone.prop('type', 'text').keydown(function (e) {
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
(e.keyCode == 65 && e.ctrlKey === true) ||
(e.keyCode >= 35 && e.keyCode <= 39)) {
return;
}
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
var c = String.fromCharCode(e.which);
var n = parseInt(clone.val() + c);
//if ((min && n < min) || (max && n > max)) {
// e.preventDefault();
//}
});
clone.prop('type', 'text').blur(function (e) {
var c = String.fromCharCode(e.which);
var n = parseInt(clone.val() + c);
if ((min && n < min)) {
setText(min);
}
else if (max && n > max) {
setText(max);
}
});
self.replaceWith(group);
});
};
}(jQuery));

How do you initialise the function ?
Your problem certainly lies there...
Because it works using this:
$('input').bootstrapNumber();
See my Fiddle that includes your exact unmodified script.

KnockoutJs binding for input tag to format number with comma

Is there available binding to format an input value from 123456789 to 123,456,789. The binding should work on every keypress and validate the value if it is a valid number. I found this solution but it is not formatting on keypress.

I ended up creating custom binding. It only works on IE10 and above for the usage of event input.
Here's the code. See fiddle here.
String.prototype.countOccurence = function(char){
return (this).split(char).length - 1;
}
$.fn.selectRange = function(start, end){
if(end === undefined)
end = start;
return this.each(function() {
if("selectionStart" in this){
this.selectionStart = start;
this.selectionEnd = end;
} else if(this.setSelectionRange)
this.setSelectionRange(start, end);
else if(this.createTextRange){
var range = this.createTextRange();
range.collapse(true);
range.moveEnd("character", end);
range.moveStart("character", start);
range.select();
}
});
};
ko.helper = {};
ko.helper['toNumber'] = function (value, limit){
limit = limit || 10;
var num = Number((value || "").toString().replace(/[^0-9]/gi, "").substring(0, limit));
return num;
}
ko.bindingHandlers['formatNumber'] = {
init: function(element, valueAccessor, allBindings){
var value = valueAccessor();
var limit = allBindings.get("limit") || 10; //billion
var position = 0;
var navigationKeys = [33, 34, 35, 36, 37, 38, 39, 40, 9];
var isBackSpace = false;
var oldLengthValue = (value() || "").toString().length;
function isKeyControls(e){
if(e.ctrlKey && (e.keyCode == 67 || e.keyCode == 86 || e.keyCode == 65)){
return true;
}
if(e.shiftKey && (e.keyCode == 37 || e.keyCode == 39)){
return true;
}
return false;
}
$(element).on("keyup", function(e) {
if(this.selectionStart == this.value.length)
return;
if(isKeyControls(e) || e.shiftKey){
return;
}
var navigation = (e.keyCode == 37
? -1
: e.keyCode == 39
? 1
: 0);
var customSelectionStart = this.selectionStart; // + navigation;
//customSelectionStart = customSelectionStart
var positionMinusOne = customSelectionStart == 0
? -1
: customSelectionStart;
positionMinusOne = positionMinusOne + (positionMinusOne == -1 ? 0 : navigation);
var previousCharacter = positionMinusOne == -1
? ""
: this.value.substring(customSelectionStart - 1, customSelectionStart);
if(previousCharacter == ","){
$(this).selectRange(customSelectionStart +
(isBackSpace ? -1 : 0));
}
var currentCommaOccurence = this.value.countOccurence(",");
var commaValue = oldLengthValue > currentCommaOccurence ? -1
: oldLengthValue < currentCommaOccurence ? 1
: 0;
if(commaValue != 0){
$(this).selectRange(customSelectionStart +
commaValue);
}
oldLengthValue = this.value.countOccurence(",");
});
$(element).on("keydown", function (e) {
if (isKeyControls(e)) {
return;
}
var navigation = (e.keyCode == 37
? -1
: e.keyCode == 39
? 1
: 0);
var customSelectionStart = this.selectionStart + navigation;
//customSelectionStart = customSelectionStart
var positionMinusOne = customSelectionStart == 0
? -1
: customSelectionStart;
positionMinusOne = positionMinusOne + (positionMinusOne == -1 ? 0 : navigation);
var previousCharacter = positionMinusOne == -1
? ""
: this.value.substring(customSelectionStart - 1, customSelectionStart);
if(previousCharacter == ",")
$(this).selectRange(customSelectionStart);
isBackSpace = e.keyCode == 8;
if(isBackSpace)
return;
//Navigation
if(navigationKeys.some(function(key) {
return key == e.keyCode;
}))
return;
//Other Keys
var isNumber = (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);
var isLimit = (limit + parseInt(limit / 3)) == this.value.length;
if(!(isNumber)
|| isLimit){
e.preventDefault();
return;
}
});
$(element).on("input", function(e, a, b, c) {
console.log(this.selectionStart, this.selectionEnd);
var convertedValue = ko.helper.toNumber(this.value, limit);
var formatted = convertedValue
? ko.helper.toNumber(this.value, limit).toLocaleString()
: "";
position = this.selectionStart == this.value.length
? formatted.length
: this.selectionStart;
value(convertedValue || "");
this.value = formatted;
$(this).selectRange(position);
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).off();
});
ko.bindingHandlers["formatNumber"].update(element, valueAccessor, allBindings);
},
update: function(element, valueAccessor, allBindings){
var value = valueAccessor();
var limit = allBindings.get("limit") || 10; //billion
var convertedValue = ko.helper.toNumber(value(), limit);
var formatted = convertedValue
? ko.helper.toNumber(value(), limit).toLocaleString()
: "";
element.value = formatted;
}
};

JQuery / JavaScript Keyboard event

I have a typing speed test with a textarea and I have I paragraph split into spans. Every time the user hits space, it highlights the next span. Then I split the textarea val() and compare the two at the end. I have everything working except I cannot get the enter key to do what I want it to do. I need it to act like the space bar(in the background) and act as the enter key on screen.
$(function() {
//APPEARANCE
$('#error').hide();
$('#oldTextOne').hide();
$('#oldTextTwo').hide();
$('#oldTextThree').hide();
$('#oldTextFour').hide();
$('#oldTextFive').hide();
$('.linkBox').hover(function() {
$(this).removeClass('linkBox').addClass('linkHover');
}, function() {
$(this).removeClass('linkHover').addClass('linkBox');
});
//FUNCTIONALITY VARIABLES
var min = '5';
var sec = '00';
var realSec = 0;
var errorTest = "hasn't started yet";
var oldTextVal;
var para;
// PICK A RANDOM PARAGRAPH
function pickRandom() {
var date = new Date();
date = date.getTime();
date += '';
var dateSplit = date.split('');
var temp = dateSplit.length - 1;
var picker = dateSplit[temp];
if (picker === '0' || picker === '1') {
para = $('#oldTextOne').text();
}
else if (picker === '2' || picker === '3') {
para = $('#oldTextTwo').text();
}
else if (picker === '4' || picker === '5') {
para = $('#oldTextThree').text();
}
else if (picker === '6' || picker === '7') {
para = $('#oldTextFour').text();
}
else {
para = $('#oldTextFive').text();
}
var splitPara = para.split(' ');
for (i in splitPara) {
$('#oldTextBox').append('<span id="pw' + i + '">' + splitPara[i] + '</span> ');
}
}
pickRandom();
//FUNCTION FOR TIMER
//APPEARANCE
function show() {
$('#timer').text(min + ' : ' + sec);
}
show();
//COUNT-DOWN
var count = function() {
sec = +sec - 1;
sec += '';
realSec++;
if (+sec === -1) {
sec = '59';
min -= 1;
min += '';
}
if (sec.length === 1) {
sec = '0' + sec;
}
show();
if (sec === '00' && min === '0') {
clearInterval(run);
checkIt();
}
};
// TYPE THE TEXT INTO #TYPEDTEXTBOX
$('#pw0').addClass('green');
var lastLetter;
$('#typedTextBox').focus().keypress(function() {
if (errorTest === "hasn't started yet") {
errorTest = 'running';
run = setInterval(count, 1000);
}
//STOP ERRORS FROM PEOPLE HITTING SPACE BAR TWICE IN A ROW !!NOT WORKING IN IE8
var thisLetter = event.which;
if (lastLetter === 32 && event.which === 32) {
event.preventDefault();
}
lastLetter = thisLetter;
}).keyup(function() {
//STOP ERRORS FROM BACKSPACE NOT REGISTERING WITH KEYPRESS FUNCTION
if (event.which === 8) {
lastLetter = 8;
}
if (event.which === 13) {
?????????????????????????????????????????????
}
//SPLIT THE TYPED WORDS INTO AN ARRAY TO MATCH THE OLD TXT SPANS (TO HIGHLIGHT THE CURRENT WORD IN OLDTXT)
var typedWords = $(this).val().split(' ');
var temp = typedWords.length - 1;
var oldTemp = temp - 1;
var stopErrors = temp + 1;
$('span:nth(' + temp + ')').addClass('green');
$('span:nth(' + oldTemp + ')').removeClass('green');
$('span:nth(' + stopErrors + ')').removeClass('green');
//SCROLL
if (typedWords.length < 50) {
return;
}
else if (typedWords.length > 50 && typedWords.length < 100) {
$('#oldTextBox').scrollTop(30);
}
else if (typedWords.length > 100 && typedWords.length < 150) {
$('#oldTextBox').scrollTop(60);
}
else if (typedWords.length > 150 && typedWords.length < 200) {
$('#oldTextBox').scrollTop(90);
}
else if (typedWords.length > 200) {
$('#oldTextBox').scrollTop(120);
}
//KEEP FOCUS IN THE TYPING AREA
}).blur(function() {
if (errorTest !== 'done') {
$(this).focus();
}
});
//COMPARE
//MAKE AN ARRAY OF THE OLDTEXT
var oldWords = para.split(' ');
//FUNCTION TO DISPLAY RESULTS
var checkIt = function() {
errorTest = 'done';
var correct = 0;
var typed = $('#typedTextBox').val();
var typedWords = typed.split(' ');
$('#typedTextBox').blur();
for (i = 0; i < typedWords.length; i++) {
if (typedWords[i] === oldWords[i]) {
correct += 1;
}
}
var errors = typedWords.length - correct;
var epm = (errors / realSec) * 60;
var wpm = Math.round(( ($('#typedTextBox').val().length / 5 ) / realSec ) * 60);
var realWpm = Math.round(wpm - epm);
//SHOW RESULTS
$('#oldTextBox').html('<br><span id="finalOne">WPM : <strong>' + realWpm + ' </strong></span><span class="small">(error adjusted)</span><br><br><span id="finalTwo">You made ' + errors + ' errors </span><br><span id="finalThree">Total character count of ' + $('#typedTextBox').val().length + '</span><br><span id="finalFour">Gross WPM : ' + wpm + '</span>');
};
//STOP BUTTON APPEARANCE AND FUNCTIONALITY
$('#stop').mouseover(function() {
$(this).addClass('stopHover');
}).mouseout(function() {
$(this).removeClass('stopHover');
}).click(function() {
if (errorTest === 'running') {
checkIt();
clearInterval(run);
errorTest = 'done';
}
});
});

try this:
//ENTER KEY
if (event.which === 13) {
//event.stopPropagation(); or
event.preventDefault();
//simulate spacebar
$(window).trigger({type: 'keypress', which: 32, keyCode: 32});
}

#james - Thanks for the help. I found a better way of thinking about the problem. Instead of changing the enter key action, I changed the split function to var typedWords = typed.split(/[ \r\n]+/);

Jquery Auto change focused text box via button

i am creating a system where there will be a pacific mobile view. From this you will be able to press one of 3 buttons and it will emulate a key press on a keyboard.
Currently for the desktop version the focused box changes like this:
$('.today').keydown(function(e) {
if ($.inArray(e.keyCode, [69, 88, 191, 8, 40, 38]) === -1) { // 8 is backspace
e.preventDefault();
}
});
$('.today').keyup(function(e) {
if ($.inArray(e.keyCode, [69, 88, 191, 8, 40, 38]) === -1) { // e, x, / respectively // don't print the character
return false;
}
var self = $(this);
var currentInput = self.data('number');
var next = $(currentInput + 1);
var previous = $(currentInput - 1);
var keyCode = e.keyCode || e.which;
var num = self.data('number') + 1;
var nom = self.data('number') - 1;
if(('input.today[data-number="' + num +'"]').length && keyCode === 40)
$('input.today[data-number="' + num +'"]').focus()
else if(('input.today[data-number="' + nom +'"]').length && keyCode === 38)
$('input.today[data-number="' + nom +'"]').focus();
else if(('input.today[data-number="' + num +'"]').length && self.val().length == self.attr('size')) {
$('input.today[data-number="' + num +'"]').focus();
}
});
For the buttons I have this piece of code:
$("button").click(function() {
$(".today").focus();
var e = jQuery.Event("keydown");
e.which = 47; // # Some key code value
$("input").val(String.fromCharCode(e.which));
$("input").trigger(e);
});
$('input').keypress(function(e){
console.log('Yes keydown triggered. ' + e.which)
});
This fills the text box and it will change to next, but then when i press it will focus back to original... Any ideas.

$(".today").focus();
suggests your using classes as the identifier, are your ID's unique?

Changing the charCode of the key pressed

In following example I am attempting to change the charCode of the key pressed but it does not change. When I press "a" I want it to type "b". What am I doing wrong?
$("#target").keypress(function(event) {
if ( event.which == 97 ) {
//alert('pressed a');
//event.preventDefault();
event.keyCode = 98;
event.charCode = 98;
event.which = 98;
}
});

You can't override the keycode in the event object...
Look at this snippet:
$('#target').keypress(function(e){
if (e.which == 97)
this.value = this.value + String.fromCharCode(98)
else
this.value = this.value + String.fromCharCode(e.which)
....
return false;
})

replace comma and dash to slash.
$('.pdate').on('keypress', function (e) {
var ch = String.fromCharCode(e.keyCode);
$("div").text(e.keyCode)
if (!((ch >= '0' && ch <= '9') ||
ch == '/' || ch == ',' || ch == '-')) {
return false;
}
if (ch == ',' || ch == '-')
{
var val = $(this).val();
var s = this.selectionStart;
val = val.slice(0, s) + "/" + val.slice(s, val.length);
$(this).val(val)
this.selectionStart = s +1;
this.selectionEnd = s +1;
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" class="pdate" />
<div></div>