Make an <input type="text"> input-ready for input

jPaulB

jPaulB

Joined
Aug 16, 2022
Messages
52
Reaction score
2
Hi Everybody,

I have a text input on my form. Using the autofocus feature, this input is almost ready for input except that; the user must mouse-click inside the input box to activate their keyboard input.

HTML: 
<div class="input-group">
    <span class="input-group-text"><i class="bi-person-fill" arial-hidden="true"></i>&nbsp;</span>
    <input type="text" class="form-control" placeholder="Enter Your User Name" id="uName" name="uName" required="required" autofocus>
 </div>

Visitors can not just go ahead and enter their information. Can I change that? What do I refer to?
 
BigDady

BigDady

Joined
Nov 13, 2020
Messages
302
Reaction score
38
This code works the way you want it in FF and chrome. You must have something further down that is robbing the autofocus from this <input>. Post all the code and we'll look for it.
 
jPaulB

jPaulB

Joined
Aug 16, 2022
Messages
52
Reaction score
2
BigDady said:
This code works the way you want it in FF and chrome. You must have something further down that is robbing the autofocus from this <input>. Post all the code and we'll look for it.
Click to expand...
Well, here is the full throttle HTML code:

HTML: 
<?php
    session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="Login.php">
  <meta name="description" content="Joseph Paul Bruneau">
  <meta name="(jpaulb.com)">
  <meta name="dcterms.created" content="Thursday June 29-2023   8:00am AST">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <!-- Bootstrap Font Icon CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <!--Custom CSS & JS-->
    <link rel="stylesheet" href="../scripts/inputBox.css" type="text/css">
  <script src="../scripts/inputBox.js"></script>
  <!--Used to define the dimensions of PopUp boxes-->
    <style>
         body {
             font-size: 0.800rem;
            position: relative;
            left: 6.25rem;
            height: 8rem;
            width: 47.5rem;
        }
    </style>
    <title>Log-In</title>
</head>
    <body>
        <div class="container-sm">
            <div class="row " style="margin-top: 3.125rem">
                <div class="col-md-6 col-md-offset-3 form-container">
                    <h2>Log-In</h2>
                    <hr>
                    <form method="post" action="LogInHandler.php">
                   <div class="row">
                     <div class="col-sm-6 form-group">
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi-person-fill" arial-hidden="true"></i>&nbsp;</span>
                                        <input type="text" class="form-control" placeholder="Enter Your User Name" id="uName" name="uName" required="required" autofocus>
                         </div>
                     </div>
                            <div class="col-sm-6 form-group">
                                <div class="input-group">
                                    <span class="input-group-text"><i class="bi-key-fill" arial-hidden="true"></i>&nbsp;</span>
                                         <input type="password" class="form-control" placeholder="Enter Your Password" id="uPassword" name="uPassword" required="required">
                                </div>
                            </div>
                   </div>
                        <hr>
                        <div class="row">
                      <div class="col-sm-3  form-group mb-2">
                                <p style="text-align: left">
                            <input type="submit" class="submitbtn2" id="1" value="Clear"></input>
                                </p>
                    </div>
                      <div class="col-sm-3  form-group">
                                <p style="text-align: center">                                                                                                   <ol>
                            <input type="submit" class="submitbtn1" id="2" value="Submit"></input>
                                </p>
                    </div>
                      <div class="col-sm-3 form-group">
                                <p style="text-align: right">
                            <input type="submit" class="submitbtn2" id="3" value="Password?"></input>
                                </p>
                    </div>
                        </div>
          </form>
                </div>
         </div>
        </div>
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

The <input type="text" >autofocus line also looks at two CSS classes:

CSS: 
.form-container input[type=text] {
    background-color: #F0F0F0  ;
    border-color: #000000;
    border-style=: groove;
    border-width: 0.125rem;
    border-radius: 0.250rem;
    border: 0.125rem solid;
}

.form-container input[type=text]:focus {
    background-color: #FFFF00;
    box-shadow: #339900 0.625rem 1.25rem 1.25rem -0.625rem;
    border-style: groove;
    border-width: 0.125rem;
    border-radius: 0.250rem;
    border: 0.125rem solid;
    font-family: Cabin SemiBold, sans-serif;
    font-weight: bold;
    font-size: normal;
}

However, although the input-box does change its' appearance, and the caret appears inside that box, a user cannot just start to enter their username without clicking the mouse button first.
 
Last edited:
BigDady

BigDady

Joined
Nov 13, 2020
Messages
302
Reaction score
38
It still works FF & Chrome.
It would be nice to move the background color when the focus is changed:
Code: 
#uPassword:focus{
    background-color: #FFFF00;
}

try flushing your cache.
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
jPaulB said:
user must mouse-click inside the input box to activate their keyboard input.
Click to expand...
or press TAB key on their keyboard ;)


I suggest a swap "type" from "submit" to "reset" for button
jPaulB said:
<input type="submit" class="submitbtn2" id="1" value="Clear"></input>
Click to expand...
HTML: 
<input type="reset" class="submitbtn2" id="1" value="Clear"></input>


Writing "id" as a single number is not good programming practice
jPaulB said:
<input type="submit" class="submitbtn2" id="1" value="Clear">
<input type="submit" class="submitbtn1" id="2" value="Submit">
<input type="submit" class="submitbtn2" id="3" value="Password?">
Click to expand...

in this case it's better to use e.g.
login-btn-1, login-btn-2 , ...
login-btn_1, login-btn_2 , ...



In HTML, the <input> element is a void element, which means it doesn't require a closing tag </input>
jPaulB said:
<input type="submit" class="submitbtn2" id="1" value="Clear"></input>
Click to expand...
 
Last edited:
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
BigDady said:
It would be nice to move the background color when the focus is changed:
Click to expand...
@jPaulB according suggested above, using a comma you can create a "list" of items for which you can use the same css code e.g.

CSS: 
.form-container input[type=text],
.form-container input[type=password] {
  background-color: #F0F0F0;
  border-color: #000000;
  border-style: groove;
  border-width: 0.125rem;
  border-radius: 0.250rem;
  border: 0.125rem solid;
  transition: all 100ms;
}
.form-container input[type=text]:focus,
.form-container input[type=password]:focus {
  background-color: #FFFF00;
  box-shadow: #339900 0.625rem 1.25rem 1.25rem -0.625rem;
  font-family: Cabin SemiBold, sans-serif;
  font-weight: bold;
  font-size: normal;
}

or just use class "form-control"
jPaulB said:
<input type="text" class="form-control" placeholder="Enter Your User Name" ...>
Click to expand...

CSS: 
.form-container .form-control {
  background-color: #F0F0F0;
  border-color: #000000;
  border-style: groove;
  border-width: 0.125rem;
  border-radius: 0.250rem;
  border: 0.125rem solid;
  transition: all 100ms;
}
.form-container .form-control:focus {
  background-color: #FFFF00;
  box-shadow: #339900 0.625rem 1.25rem 1.25rem -0.625rem;
  font-family: Cabin SemiBold, sans-serif;
  font-weight: bold;
  font-size: normal;
}
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
jPaulB said:
Visitors can not just go ahead and enter their information
Click to expand...
Finally you can use javascript to get this effect e.g.

HTML: 
<body>
    ...
  
  
  
    <script>
        window.onload = () => {
            document.querySelector('form input').focus();
        };
    </script>
</body>

or

HTML: 
<body>
    ...
  
  
  
    <script>
        window.onload = () => {
            document.querySelector('form input#uName').focus();
        };
    </script>
</body>
 
jPaulB

jPaulB

Joined
Aug 16, 2022
Messages
52
Reaction score
2
Hi VBScript,

Thank you again for your reply. You have given me a lot of your time through this forum on several questions. Your responses have always given me more than I asked for, and always peak my imagination and curiosity.

The JavaScript option is interesting. How would I incorporate that into a button statement?


HTML: 
<div class="col-sm-4">
    <p style="text-align: left">
        <input type="reset" value="Clear">
    </p>
</div>
 
VBService

VBService

Joined
Jul 4, 2023
Messages
366
Reaction score
41
jPaulB said:
How would I incorporate that into a button statement?
Click to expand...
;)

HTML: 
<style>
  input,
  button {
    display: block;
  }
  input + input,
  input ~ button {
    margin-top: .5rem;
  }
</style>

<form>
  <input type="text" name="field1" value="">
  <input type="text" name="field2" value="">
  <button type="reset">Clear</button>
</form>

even like that :cool:

HTML: 
<style>
  input,
  button {
    display: block;
  }
  input + input,
  input ~ button {
    margin-top: .5rem;
  }
</style>

<form>
  <input type="text" name="field1" value="">
  <input type="text" name="field2" value="">
  <button type="button" onclick="this.parentNode.reset()">Clear</button>
</form>

or 😇

HTML: 
<style>
  input,
  button {
    display: block;
  }
  input + input,
  input ~ button {
    margin-top: .5rem;
  }
</style>

<form id="myForm">
  <input type="text" name="field1" value="">
  <input type="text" name="field2" value="">
  <button type="button" onclick="myForm.reset()">Clear</button>
</form>

HTML: 
<style>
  form * {
    box-sizing: border-box;
  }
  input {
    display: block;
    width: 12rem;
  }
  input + input,
  input ~ button {
    margin-top: .5rem;
  }
  button {
    width: 3.8rem;
  }
  button + button {
    margin-left: 4rem;
  }
</style>

<form>
  <input type="text" name="field1" value="">
  <input type="text" name="field2" value="">
  <button type="reset">Clear</button>
  <button>Submit</button><!-- <button type="submit">Submit</button> -->
</form>
 
Last edited:

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

"input-group-text" help 7
Password confirmation issue 5
Uhhhhh, What can I do next? 6
Reversing output of user input by using while loop... 2
How can I arrange a series of radio buttons? 2
How to display input options only after selecting an option from the 'select class' tag JS? 6
Another Password Confirmation 2
Problems with using event handlers for button and textarea input 1

Members online

Total: 40 (members: 2, guests: 38)
Robots: 347

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,058
Latest member
QQXCharlot

Latest Threads

Top