I am attempting to develop an input field for entering a PIN. I would like the PIN to be masked on mobile devices, similar to how passwords are obscured in password input fields. I came across a suggestion on stackoverflow regarding this, but unfortunately, none of the solutions have been successful thus far.
<input type="password" name="PIN" pattern="[0-9]*" inputmode="numeric" style="-webkit-text-security: disc;" required>
Is there a method to accomplish this task?
To achieve this effect, CSS is the way to go
#password{
-webkit-text-security: disc;
-moz-text-security:circle;
text-security:circle;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
} <input type="number" id="password" pattern="[0-9]*" >There are multiple ways to achieve this, but using CSS is the simplest approach. I hope this solution works for you :)
You might want to consider implementing a solution using JavaScript
let phoneNumberInput = document.getElementById('phone');
phoneNumberInput.oninput = function(){
// check if field is empty
if(!this.value) return;
// check if input is not numeric
let isNumeric = this.value[this.value.length - 1].match(/[0-9]/g);
if(!isNumeric) this.value = this.value.substring(0, this.value.length - 1);
}<input id="phone" type="text">Consider changing type="password" to type="number". It seems that the password input type may be preventing the numeric keyboard from appearing on mobile devices. Although this solution may only be effective on webkit browsers, it is worth a try since webkit is widely utilized in mobile browsers.
<input type="number" pattern="[0-9]*" inputmode="numeric" style="-webkit-text-security:disc;">In addition, there is no foolproof method to guarantee both password and numeric input on mobile devices without resorting to javascript.
By selecting this choice, a numeric keyboard will appear to input only numbers.
<input inputmode="numeric" type="password" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
This form's HTML is set up for input with a popup display feature upon submission. Currently, only text can be displayed in the popup. It doesn't show the text of selected checkboxes or dropdown lists - just numbers for the dropdown and "ON" for ...
I am attempting to retrieve SQL results from a database using an AJAX call and display them on another PHP page. Here is my AJAX call code: function newfunc(){ start += 10; var params = parseURLParams(document.URL); var datastring = "nextStart="+start+"&a ...
My goal is to create a grid that maximizes the number of elements in its width without stretching them to fit the entire window. That's why I'm utilizing CSS grid with the auto-fill property, which is almost achieving the desired outcome. I want ...
How can I transfer a variable between two Vue files? Hello, in my SendCode.vue file, I have a variable named NewEmail that I would like to use in another file called changePass.vue. Is there any way to do this? Can someone offer assistance? Thank you</p ...
For the past 48 hours, I've been grappling with an issue on my HTML page that features four divs. Each div contains three input fields and a button. The problem arises when a user leaves a text box empty upon submitting - instead of staying in the sam ...
The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...
As a newcomer to angularjs, I am attempting to implement a filter on click. The user will select a source and destination, then click on the filter button. The table should display results based on the input. Upon page load, the table should already contai ...
After days of hard work and research, I finally figured out how to achieve what I needed. In my React App, I have a Material UI table that I want to load with pre-rendered checks in the DOM based on entries in a selected array. The selected array contains ...
In my JSON document, I have an array named dealers that consists of various dealer objects like the examples below: "dealers" : [ { "name" : "BMW Dealer", "country" : "Belgium", "code" : "123" }, { "name" : ...
Utilizing the react-countup library to animate counting up to a specific value. When a user clicks a button, the generated value is 9.57, and through react-counter, it visually increments from 1.00 to 9.57 over time. Here's the code snippet: const { ...
I am trying to modify my Bootstrap navbar by adding a Login button, but I encountered an issue. When I use col-x classes inside the navbar to separate elements equally, they only cover 50% of the width and no more. However, using col-x classes outside the ...
I am looking to trigger an Ajax call once my document has finished loading. Here is the code I currently have: <script> $(window).bind("load", function () { getCategories(); }); </script> <script> ...
Currently, I am developing an online store using Node, Express, and Mongoose. In the postCheckout Controller, which is responsible for handling user purchases, I am facing an issue. When a user buys a product with a quantity of 5, the code should check i ...
Upon glancing at my code, it should be evident that I am a newcomer to the world of Angular. I am currently developing an application that enables users to search for text, queries a database whenever the value in the text input changes, and displays a li ...
I am currently working on my very first angularjs application using version 1.6x, and I am encountering some 404 errors with my router. Here is how my router is set up: app.config(function($routeProvider, $locationProvider) { $locationProvider.html5M ...
Following a post request to an external API, my goal is to navigate back to the homepage. While I am familiar with React, this is my first experience using Next.js. Here's the snippet of code: export default function New({genres}) { const createMovie ...
Is there a way to update the value of a TextField based on the slider, while still allowing manual input in the TextField? I want the TextField to reflect changes from the slider but not vice versa. I attempted making the TextField a controlled component ...
When running webpack on a project that includes the winston package, several warnings are generated. This is because webpack automatically includes non-javascript files due to a lazy-loading mechanism in a dependency called logform. The issue arises when ...
Currently, I am facing an issue with implementing CSS on elements that are nested inside a function. I am unsure of how to access them properly. For example: updateUser() { this.usersService.UpdateUser(this.user.id, this.user) .subscribe(() =& ...
I'm relatively new to angularjs and I'm currently working on implementing some new features to an existing Angular JS application. The current API calls are quite intricate so I decided to make a direct call. Below is the code snippet for my new ...