Implement a function that allows users to input a pin code digit by digit using a single HTML input

I am working on an application that requires users to input an SMS code for login. Below is a simplified example of what I need.

For better accessibility, I want the SMS code input to be just one <input> in the HTML. I would also like to eliminate the code responsible for handling transitions between digits and simply duplicate them instead.

Is it feasible to achieve this with a single input field? If yes, how can it be done?

I prefer not to overlay DIVs directly on top of the input field for responsiveness reasons.

The app is built using react and MUI, but I can work with any HTML-CSS solution provided.

https://i.sstatic.net/6o2we.png

htmlcssreactjswebmaterial-ui

Answer №1

.container {
  margin: 50px;
  background: #fff url(https://i.ibb.co/x7SpXXZ/squares4.png) 12px 2px no-repeat;
  width: 160px;
  overflow: hidden;
}

.container input {
  letter-spacing: 20px;
  font-family: "Courier New", Courier, monospace;
  font-size: 150%;
  font-weight: bold;
  height: 30px;
  padding-left: 20px;
  padding-right: 20px;
  width: 160px;
  border: 0;
  background-color: transparent;
  outline: 0;
}
<div class="container">
  <input type="text" value="1234" maxlength="4">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating HTML into a WordPress Plugin

I am currently working on my very first WordPress plugin. The main purpose of this plugin is to display a message on the plugin page whenever a user saves or edits pages. However, I'm experiencing some issues with printing out these messages. Here&ap ...

phphtmlwordpress

Generating an HTML table using an array retrieved from a PHP execute_db function, displaying repeated entries

My goal is to dynamically populate an HTML table with data retrieved from a SQL query. The structure of the table, including headings, should adjust based on user selections, reflecting the results of the query. While searching for a solution, I came acros ...

phphtmlarrays

Ways to verify the login status of a user in NextJS

Currently, I'm utilizing Codeigniter 4 for the backend and have successfully implemented the login page. However, I've hit a roadblock in determining how to verify if the user is logged in or not using Next JS for the frontend. My initial thought ...

reactjsreact-hooksnext.jsuse-statereact-props

issues with functionality in purecss drop down menu

I have been struggling to create a vertical drop-down menu using the purecss library without success. purecss.io/menus/ This is what my CSS code looks like: <div class="pure-menu custom-restricted-width"> <ul class="pure-menu-list"> ...

htmlcss

Switching over from create-react-app to NextJS, encountering difficulties with integrating ThreeJS

A while back, I had successfully implemented a 3D model viewer in React. Now, I'm facing a challenge as I try to migrate this project to Next.js. The specific issue lies with the GLTFLoader and OrbitControls dependencies that were previously imported ...

javascriptreactjsthree.jsnext.js

Concerns with the Width of Gutters in Susy

I am working with a 24 Susy column grid and trying to create boxes that span 6 columns each, allowing for 4 boxes per row. However, I also want to add gutters around them within a wider container that is 24 columns wide. Despite my efforts, the columns do ...

htmlcssgridsusygutter

What could be causing the intersection observer to not accurately observe the second element?

Check out this example on codesandbox: https://codesandbox.io/s/quirky-wozniak-3qih8p?file=/src/Progress.tsx I'm currently working with the Intersection Observer API to monitor both the first and last elements in my list. My aim is to show either a l ...

reactjsintersection-observer

Monitor the elements displayed as you scroll

Thank you for taking the time to read this. I am currently working on a webpage that features a top Calendar component displaying a week, and below that is a Scroll component showing detailed information for each day of the week. Here is what my page loo ...

javascriptreactjsinfinite-scroll

Guidelines on storing JWT in a Single Page Application (SPA) built with React to efficiently manage subsequent requests following the authentication process

Currently, I am working on an ASP.NET CORE API solution and my goal is to allow multiple clients (such as SPAs, mobile apps, MVC applications) to consume data from this API. To secure the API using JWTs, I am planning to implement IdentityServer4. Now, m ...

reactjsjwtidentityserver4

The issue of duplicate CSS arising during the compilation of SASS into a single CSS file with G

Just getting started with Stack Overflow and Gulp (using version 3.9.1). My goal is to compile all of my scss files into a single css file for my website. Here's what I have in my gulpfile so far: var gulp = require('gulp'); var sass = requ ...

csssassgulpgulp-sassgulp-concat

"Enjoy a unique browsing experience with a two-panel layout featuring a fixed right panel that appears after scrolling

I am facing difficulty in designing a layout with two panels where the left panel has relative positioning and the right panel becomes fixed only after a specific scroll point. Additionally, I need the height of the right panel to adjust when the page scro ...

javascriptjqueryhtmlcss

My Tailwind CSS toggle button disappears in dark mode, why is that happening?

<button aria-label="Toggle Dark Mode" type="button" className="lg:inline-flex lg:w-40 md:w-screen p-3 h-12 w-12 order-2 md:order-3" onClick={() => setTheme(theme === 'dark' ? &ap ...

javascripthtmlreactjsnext.jstailwind-css

The count of unread messages remains unchanged even after being viewed in the Rocket Chat Iframe integrated within a React TypeScript project

My attempts to retrieve the unread message count for a room using different requests have been inconsistent. Sometimes the count displays correctly, while other times it does not. { url:`/api/v1/channels.counters?roomId=${roomId}`, headers: { ...

reactjsiframesubscriptionrocket.chatread-unread

Error occurs after upgrading React app to vite due to node-fetch issue

I'm a bit perplexed by this issue. Transitioning the build tool to vite has been seamless except for encountering this error: No matching export in "node_modules/node-fetch/lib/index.mjs" for import "RequestInit" No matching expor ...

node.jsreactjstypescriptvite

Using a toolbar to insert a hyperlink for hypertext communication

My journey with Javascript and React began this week, so I'm still getting the hang of things, especially in the front end domain. In my project, there's a link button within a toolbar. The idea is to click on it, have a text box pop up where yo ...

javascriptnode.jsreactjs

Using Python API to directly upload web files to Drive via URL

Currently working with the Drive REST v3 Python client library. I have successfully managed to upload files from my local machine to Google Drive. However, I am struggling to figure out how to upload files directly from the web to Google Drive using downlo ...

pythonhtmlpython-3.xfile-uploadgoogle-drive-api

Guide to highlighting rows in v-data-table with a click in Vuetify (version >= 2.0)

In my email management system, I utilize a v-data-table to organize emails. When a user clicks on a row, a popup displaying the email details appears. Desired Feature: I am looking to have the rows marked as "readed" (either bold or not bold) after th ...

javascriptcssvue.jsvuetify.js

Tips for avoiding Bootstrap collapse overflow within a container that has overflow-y-scroll

I'm currently facing an issue with a container that has the overflow-y-scroll CSS property. Inside this container, there's a Bootstrap collapse button that expands to show more content when clicked. The problem arises when the expanded content ov ...

htmlcssscrollbaroverflowbootstrap-5

What is the best way to include Google Calendar in a div container while ensuring it is responsive?

I'm currently working on the layout of a website that features a slideshow of images at the top, followed by an embedded Google Calendar. I've encountered an issue with the responsiveness of the Google Calendar within its designated div container ...

htmlcssgoogle-calendar-api

Photo on vertical display

I have been working on displaying dynamic photos from a backend file and looping through them. I have successfully displayed the images vertically using CSS. vertical-align: middle; However, when I tried to add a photo name for each image, the positionin ...

htmlcss