Currently, I am utilizing the <input type="number"... element in my code. However, I encountered an issue where I cannot use commas when entering numbers. I tried changing the input to <input type="text", but this solution led to further complications as users were able to type letters into the input field causing issues since that input is summed with another one.
Do you have any suggestions on how to address this problem?
If you're looking to include decimals like 1.2 or 2.3 in your number input field, then utilizing the step attribute is the way to go. Take a look at the code snippet below:
<input type="number" step="0.01">I believe this solution will be effective for your needs HTML Code
<span>Float</span>
<input type="text" name="numeric" class='allownumericwithdecimal'>
<div>Only accept numeric values (With Decimal Point) </div>
<br/> <br/> <br/>
<span>Int</span>
<input type="text" name="numeric" class='allownumericwithoutdecimal'>
<div>Only accept numeric values (Without Decimal Point) </div>
JavaScript code
$(".allownumericwithdecimal").on("keypress keyup blur",function (event) {
//this.value = this.value.replace(/[^0-9\.]/g,'');
$(this).val($(this).val().replace(/[^0-9\.]/g,''));
if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
$(".allownumericwithoutdecimal").on("keypress keyup blur",function (event) {
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
JS Fiddler Reference Link Click Here
Here is a helpful javascript and jquery script:
function modifyCharacter(charStr) {
return charStr == "," ? "." : charStr;
// Define the character substitution logic here
}
function getSelection(el) {
var start = 0, end = 0, normalizedValue, range,
textInputRange, len, endRange;
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;
}
}
}
}
return {
start: start,
end: end
};
}
function offsetToCharMove(el, offset) {
return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
}
function setSelection(el, startOffset, endOffset) {
el.focus();
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
el.selectionStart = startOffset;
el.selectionEnd = endOffset;
} else {
var range = el.createTextRange();
var startCharMove = offsetToCharMove(el, startOffset);
range.collapse(true);
if (startOffset == endOffset) {
range.move("character", startCharMove);
} else {
range.moveEnd("character", offsetToCharMove(el, endOffset));
range.moveStart("character", startCharMove);
}
range.select();
}
}
$("#changeMe").keypress(function(evt) {
if (evt.which) {
var charStr = String.fromCharCode(evt.which);
var transformedChar = modifyCharacter(charStr);
if (transformedChar != charStr) {
var sel = getSelection(this), val = this.value;
this.value = val.slice(0, sel.start) + transformedChar + val.slice(sel.end);
setInputSelection(this, sel.start + 1, sel.start + 1);
return false;
}
}
});
Below is an example of an HTML input field:
<input type="text" autocomplete="off" step="any" font="red" style="width:120%" placeholder="changeMe" name="changeMe" class="input-sm form-control" id="changeMe" value="Change dot to comma">
I've been attempting to create a basic copy button using JavaScript, but I keep encountering an error. TypeError: null is not an object (evaluating 'myInp.select') Whenever I click the copy button, My code looks like this: <!DOCTYPE htm ...
Is there a way to conditionally redirect a children route? I've experimented with various methods but haven't had any success. Currently, I am using a state from the store as the condition to redirect the children routes. I have exported my stor ...
My AJAX handler contains an each() loop to push data into my temp array. However, I am encountering an issue where the array remains empty after the loop. This is puzzling, as I have used promises with each() before without any problems. var temp = []; $. ...
I have been running my astro SSR site on Netlify with great success. However, I recently encountered an issue when testing it on older iPhone models like the iPhone 6 and earlier. It seems that all script executions halt, rendering the site non-interactive ...
I have a unique challenge in my application involving a component called Notification. To bring notifications to other components, I utilize the mixin method toast('message to display', 'color-variable'). My goal is to set the backgroun ...
Exploring the Implementation of Angular 6 Route Auth Guards Across Root and Child Routes ...
I am curious to learn how I can dynamically change the color of a badge in Angular. My goal is to initially set the color of the badge to white, and then if the percVLRiskTotal reaches a specific value, change the color to green as an example. CSS: <sp ...
Here is my controller: angular.module('app', []) .controller('ctrl', ['$scope', function ($scope) { $scope.daysPerMonth = new Date(year, month).getDate(); }] ); This is the corresponding html: <div ng-app> <h1&g ...
I have been tasked with creating a Quiz App and I am currently working on building it. The app consists of several components such as "question", "question-list", and "add-question". Within the "add-question" component, there is a form that allows users ...
Next.js provides a thorough method for accessing images from the /public/ folder, where static assets are stored. This involves using Node's fs module and fetching them within the getStaticProps function. Here is an example: export async function get ...
I've been experimenting with a recursive page reload function that looks like this: export const refreshPage = (count)=>{ if (count <= 0){ // window.location.reload(); console.log("blue"); return }else { console.log(& ...
Currently, I am utilizing the jQuery-File-Upload plugin from http://blueimp.github.com/jQuery-File-Upload/. The issue I am facing is that after selecting a file in the dialog box, the name gets translated on the upload list. For example, when I chose the " ...
I have been attempting to incorporate ejs tags within an internal script tag in an ejs template. The code seems to be functioning correctly, however, "vs code" continues to indicate a "problem" with the "<%- and %>" segments as they appear red when h ...
I've been searching for information on their website but can't seem to find an answer. Can you confirm if HtmlCleaner is thread safe? I have multiple threads that will be using it and I'm unsure whether reusing an instance of the HtmlCleane ...
I am attempting to update the body content by removing all existing content and inserting an iframe: function create_custom_iframe(target){ var iframe = document.createElement('iframe'); iframe.setAttribute('id', 'target_u ...
I am facing an issue with draggable divs inside a parent container. Each div has a popup edit panel to modify its content. The problem arises when the divs overlap, causing the edit panel to get hidden behind another div. I want to ensure that whenever a d ...
While testing one of my AngularJs Services, I decided to write some Unit tests. Below is a sample code snippet that I have come up with: it('', function(done) { aDocument.retrieveServiceFile(extractedFileFeature) .then(function() { ...
Can you help me identify the potential issue? I have a service that returns JSON data, which I use to populate my table. When I hardcode the data, the plugin works fine as shown in the code snippet below: <td><strong>April Invoice</strong& ...
Working on my project using expressjs with the latest typescript definition file and typescript 2.3.4 from https://github.com/DefinitelyTyped/DefinitelyTyped. I've set up a router and want to access it from a subpath as per the official 4.x documentat ...
I'm encountering an issue where there is a '&' symbol in one of the cc email addresses. Due to the default behavior of the browser, the complete email address is not being displayed properly in Outlook. Here's an example: let to='a ...