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
463
Reaction score
56
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
463
Reaction score
56
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
463
Reaction score
56
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
463
Reaction score
56
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
Hey can anyone tell me why input data wont save in my database? 0
How can I arrange a series of radio buttons? 2
[HELP] Add-on - Twitch chat input 0
How to display input options only after selecting an option from the 'select class' tag JS? 6

Members online

Total: 165 (members: 3, guests: 162)
Robots: 475

Forum statistics

Threads
473,913
Messages
2,570,027
Members
46,420
Latest member
IsobelScha

Latest Threads

Top