Authentication using a singular input

Struggling to design an input for a verification code with just one input instead of four. However, I am facing some challenges:

  1. The input is not responding correctly when clicked, it's a bit buggy and requires clicking at the end of the input to type anything.
  2. How can I align dashes with the entered numbers so that it works with all numbers consistently and always remains centered and positioned underneath each number? Is there a particular technique for this?
  3. Any recommendations and best practices?

input {
    width: 500px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #ededed;
    outline: unset !important;
    letter-spacing: 80px;
    text-indent: 105px;
}
.verf {
position: relative;
float: left;
}
.verf::after {
    content: "____";
    position: absolute;
    left: 0;
    bottom: 10px;
    color: orange;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 80px;
    text-indent: 105px;
}
<div class="verf">
<input maxlength="4" value="4578"/>
</div>

htmlcss

Answer №1

Instead of using the underline, consider using a dash with HTML tags. Utilize flex to center them, adjust the letter-spacing and text-indent properties for desired results. While this approach may work, it is recommended to follow best practices by utilizing multiple inputs for better functionality.

input {
  width: 500px;
  height: 50px;
  border-radius: 5px;
  border: 1px solid #ededed;
  outline: unset !important;
  letter-spacing: 69px;
  text-indent: 132px;
}

.verf {
  position: relative;
  float: left;
}

.dash {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  bottom: 8px;
}

.dash span {
  width: 5%;
  height: 3px;
  background: orange;
  display: inline-block;
  margin: 0 5%;
}
<div class="verf">
  <input maxlength="4" value="4578" />
  <span class="dash">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </span>
</div>

Answer №2

Perhaps this information will assist you in meeting your needs

<!DOCTYPE html>
<html>
<head>
    <title>Sample code</title>
</head>
<body>
    <style type="text/css">
        #num1,#num2,#num3,#num4
        {
            width: 4%;
            outline: 0;
            border-width: 0 0 2px;
            border-color: white;
            text-align: center;
        } 
        #num1:hover{
            border-color: blue;
        }  
        #num2:hover{
            border-color: blue;
        }     
        #num3:hover{
            border-color: blue;
        }     
        #num4:hover{
            border-color: blue;

        }          
    </style>

    <center>
        <input id="num1" onmouseover="placeoverChange('num1')" type="text" name="num1" placeholder="1">
        <input id="num2" onmouseover="placeoverChange('num2')" type="text" name="num2" placeholder="2">
        <input id="num3" onmouseover="placeoverChange('num3')" type="text" name="num3" placeholder="3">
        <input id="num4" onmouseover="placeoverChange('num4')" type="text" name="num4" placeholder="4">
    </center>

    <script type="text/javascript">
        function placeoverChange(id)
        {
            var plshldr = document.getElementById(id).placeholder
            document.getElementById(id).onmousemove=function(){document.getElementById(id).placeholder=""};
            document.getElementById(id).onmouseout=function(){document.getElementById(id).placeholder=plshldr};

        }
    </script>    
</body>
</html>

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

Obtain Data for Visualizing Graph with JSON within a Database-connected Graph (highchart.js)

In the process of creating a database-driven graph, I am utilizing libraries from Codepen. These libraries include: THIS and Highchart.js The HTML file on display simply showcases the chart, while the main data processing is handled in an index.js file t ...

javascriptjqueryjsonhtmlhighcharts

Enhance your web form with the Bootstrap 4 tags input feature that allows users to add tags exclusively

I'm currently utilizing Bootstrap 4 along with Bootstrap Tags Input to create a multiple category selection feature. My goal is to enable users to choose multiple items exclusively from the predefined categories listed in the predefined_list. At pres ...

javascriptjqueryhtmlbootstrap-4bootstrap-tags-input

Having trouble pinpointing the issue with this particular if statement?

I am currently working on creating a form that compiles all entered data when the user fills out all fields. The form is connected to a PHP file and functions properly, but I encountered issues when implementing validation logic. The "Validation" section ...

javascriptphphtmlformsif-statement

The getElementByID function functions properly in Firefox but does encounter issues in Internet Explorer and Chrome

function switchVideo() { let selectedIndex = document.myvid1.vid_select.selectedIndex; let videoSelect = document.myvid1.vid_select.options[selectedIndex].value; document.getElementById("video").src = videoSelect; } <form name="myvid1"> <s ...

javascripthtml

Struggling to implement a vertical scroll bar in HTML code?

<body ng-app="myApp" ng-controller="myCtrl"> <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" > <div class="tittle" style="width: 25%;"> <a href="" ng-click="showDi ...

javascripthtmlcssangularjs

The `.append()` function includes HTML content as plain text

I am using JavaScript to dynamically add HTML elements to my webpages. I have created a loop that iterates through all the projects, each containing multiple pictures. The first step involves generating the project title and adding it within a div element ...

javascriptjqueryhtmlappend

The issue with using HTML code inside a variable that is passed into a partial view is that the code is not being

I have created a partial view to show the page header, which takes in two variables - an Icon and a title. The code for pageHeader.blade.php is as follows: <div class="page-header"> <div class="row"> <!-- Page header, center on small sc ...

htmllaravellaravel-5laravel-blade

Dynamically updating the ng-class name in AngularJS

Exploring the integration of animate.css with AngularJS. Attempting to assign a class to an element on ng-click, but facing difficulties in updating the element. Various strategies were attempted, including modifying scope values through functions, without ...

htmlcssangularjsanimate.css

What is the correct placement of DESC in a MySQL query when using PHP?

Here's the issue I'm facing: $query = "SELECT * FROM table ORDER BY 'timestamp' LIMIT $startAt, $perPage"; I've been attempting to sort the results in descending order (latest on top) by adding DESC to the query. However, every t ...

phphtmlmysqlsqlsyntax

If the option is 'Gel', use an if statement to console log

I'm trying to console.log the option from the data() function that is equal to 'Gel'. I attempted to use an if statement, but it doesn't seem to be working. Anyone have any ideas on how to make this work? data(){ return { ...

javascripthtmlvue.js

Inquiring about the best method to determine the intersection point between two lines in Draw i.o

Can someone please explain how to find the coordinate point where two lines intersect in draw i.o? I am looking for a Javascript function to solve this issue and get the coordinate of the point only. For example: ...

javascripthtmlcssdraw

Transmit information to a different JavaScript framework using Vue

Utilizing Vue, I create a JSON file using classic ASP from SQL Server and import the data. My objective is to showcase the received data on the page and in ApexCharts. The structure of the HTML page, getData.js, and the JSON from dataSql.asp is outlined b ...

htmlvue.jsrenderapexcharts

The Transition Division Is Malfunctioning

I've encountered an issue where I am trying to move a div by adjusting its left property, but no transition is taking place. Regardless of the changes I make to my code, the result remains the same. Below is the current state of the code. Can anyone i ...

javascripthtmlcssangularjs

Why does the "error loading page" message appear on the server when there is a PHP function inside jQuery Mobile?

I am facing an issue with a function I created in my jQuery Mobile code. It works perfectly fine on my local machine, but when I host it on the server, it does not work properly. Can someone please assist me? Here is a glimpse of the code: <!DOCTYPE ht ...

phpjqueryhtmljquery-mobile

How can I ensure that all the text is always in lowercase in my Angular project?

Is there a way to ensure that when a user enters text into an input field to search for a chip, the text is always converted to lowercase before being processed? Currently, it seems possible for a user to create multiple chips with variations in capitaliza ...

htmlangulartypescriptfilterangular-material

Issue with Angular: Mobile view toggle button in the navbar is unresponsive

While the dropdowns are functioning correctly in web mode, the navbar toggle isn't working as expected in small screens or mobile mode. I've been trying to figure out the issue by referring to code from CodePen that I am learning from. Despite i ...

javascripthtmlangularbootstrap-4angular-ui-bootstrap

Using jQuery, target the specific elements that have certain data attributes assigned to them

Is there a way to target elements with a specific data attribute and a unique class using jQuery? For instance, I want to select these elements: <div data-roomid="55" data-status="NoData"></div> <div data-roomid="55" data-status="Open"> ...

javascriptjqueryhtmljquery-selectors

Choose the specific selector following the current selector

Consider this example of code: <script> $(document).ready(function () { $('span').each(function () { $(this).html('<div></div>') ; if ( $(this).attr('id') == 'W0' ...

javascriptjqueryhtmljquery-selectors

Some pages are receiving images from the CDN, while others are not

I am encountering some challenges while troubleshooting an issue on a website. The CDN (content delivery network) is functioning properly on some pages but not on others. Initially, I suspected a typo in the path, but that does not seem to be the case. F ...

htmlcontent-management-systemcdnimage-optimization

Is there a way to retrieve the central anchor point position (x, y) of the user's selection in relation to the document or window?

Is there a way to retrieve the center anchor point position (x, y) of the user's selection relative to the document or window? I have tried using window.getSelection() to get selected nodes, but I am unsure how to obtain their position: See an examp ...

javascripthtmldomfrontend