I want to create form like above attached image. Can add placeholder to text box. But when user press keys placeholders missing. I need to show placeholders above the text box when key press inside the text box.
You can use html required, autofocus and pattern attribute with RegExp ^[a-zA-Z]+(?:\s[a-zA-Z]+$|$) to match one or more a-z characters case insensitive at beginning of input, followed by space character, followed one or more a-z characters case insensitive by end of input, or end of input to handle two first names, for example "Billy Joe", "Norma Jean", "Sarah Jane"; <label> element adjacent to <input> element; css :invalid, :valid, :before; :after.
When input is :invalid set border to red, outline to none; set adjacent label element :before content of to "das", label :after content to !; at :valid:focus set label :before content to "First Name", label :after to UTF-8 "CHECK MARK" ✓
#charset "UTF-8";
#input {
height: 3.14em;
left: 0px;
outline: none;
padding: 6px;
margin: 4px;
width: 150px;
}
#input:valid {
border: 1px solid green;
box-shadow: .015em .015em .015em green;
}
#input:invalid {
border: 1px solid red;
box-shadow: .015em .015em .015em red;
}
#input:invalid + [for="input"]:before {
content: "das";
}
#input + [for="input"]:after {
font-weight: bold;
left: 160px;
top: 12px;
position: absolute;
}
#input:invalid + [for="input"]:after {
content: "!";
color: red;
}
#input:valid + [for="input"]:after {
content: "\2713";
color: green;
}
#input:valid + [for="input"]:before {
content: "First Name";
color: #ccc;
}
label[for="input"]:before {
position: absolute;
left: 12px;
padding: 6px;
}
<meta charset="UTF-8" />
<input id="input" type="text" pattern="^[a-zA-Z]+(?:\s[a-zA-Z]+$|$)" required autofocus/>
<label for="input"></label>
#lbl{
color:green;
}
#in{
border:none
}
#in,#in_container,#lbl{
background:white
}
#in_container{
display:inline-block;
border:solid 1px black;
}
<div id="in_container">
<span id="lbl">First Name</span>
<br>
<input type='text' id="in">
</div>
Some CSS magic:
.input-group * {
left: 0;
position: absolute;
font-family: sans-serif;
}
.input-group input {
height: 30px;
font-size: 20px;
padding-top: 12px;
}
.input-group label {
padding-left: 3px;
padding-top: 2px;
opacity: .5;
}
<div class="input-group">
<input id="first-name" type="text">
<label for="first-name">First Name</label>
</div>
Basically, just play around with the sized until you get a solution working for you. I'd group each "input box" section, they are composed of a label superimposed onto a text input.
#container {
position: relative;
}
#container * {
font-size: 20px;
}
#my-input {
height: 30px;
}
#lbl-my-input {
line-height: 1.5;
position: absolute;
color: #bebebe
}
#my-input:focus {
padding-top: 40px;
}
<div id="container">
<label id="lbl-my-input" for="my-input">First</label>
<input id="my-input" type="text">
</div>
Here is my idea:
I put the label and the input in a div
I make div position relative, label position absolute => label will overlapped input
I use css for input:focus. When focusing happens, I extend padding-top of input.
The rest is styling (choosing) right line-height, font-size, and padding to make it beautiful
I have a solution for this.
<label style="visibility: hidden;" id="label">User Name</label>
<input id="textField" type="text" placeholder="User Name" onfocus="showLabel()" onblur="hideLabel()"></input>
<script>
function showLabel() {
var label = document.getElementById("label");
var textField = document.getElementById("textField");
textField.placeholder="";
label.style.visibility = "inherit";
}
function hideLabel() {
var label = document.getElementById("label");
var textField = document.getElementById("textField");
textField.placeholder="User Name";
if (!textField.value) {
label.style.visibility = "hidden";
}
}
</script>
Related
I am trying to code a website that has a search bar. Currently, I am polishing it up and adding some features to the site. One feature I want to add is an X every time someone types something into the search box and I want it to clear the text in the input. Technically I have achieved this but it does not feel so nice. I want it to act as the X at reverb.com.
Here is my version:
function deleteButton() {
var deletebtn = document.getElementById("deletebtn");
var input = document.getElementById("inputbar");
if (input.value.length >= 1) {
deletebtn.style.visibility = "visible";
deletebtn.style.cursor = "pointer";
}
}
function clearSearch() {
var input = document.getElementById("inputbar");
var deletebtn = document.getElementById("deletebtn");
deletebtn.style.visibility = "hidden";
input.value = "";
}
.exitbtn {
margin-top: 39px;
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.5);
border-left: none !important;
border-right: 1px solid rgba(0, 0, 0, 0.5) !important;
color: rgba(0, 0, 0, 0.5);
font-size: 16px;
background: none;
outline: none;
transition: 0.3s;
}
.exitbtn img {
visibility: hidden;
}
.exitbtn img:hover {
transition: 0.3s;
opacity: 1;
content: url("images/orange-delete-sign.png");
}
.delete-sign {
height: 31px;
opacity: 0.7;
display: inline-block;
}
<input type="text" name="search" value="" onkeyup="enterSearch(); deleteButton();" autocomplete="off" id="inputbar" class="searchbar" autocorrect="off" autocapitalize="off" tabindex="0">
<button onclick="clearSearch()" class="exitbtn extspacer"><img id="deletebtn" class="delete-sign" src="images/grey-delete-sign.png"></button>
I am showing my code just in case you are wanting it.
Here are some images of it working:
If you are wondering why I don't like this method, it is because when you hover over the button,
it is still there and the Reverb version completely disappears and acts like a normal text box.
Try input type="search". It is an inbuilt input type in HTML which creates a cross as soon as a character is entered in the input field.
Here's an example for the ease of understanding:
input { /* You could use a class name/id as well */
border-radius: 5px;
}
.Search-icon {
border-style: outset;
}
<input type="search" class="search" placeholder="some text"><span class="Search-icon">search</span>
If you want an 'X' you can use
×
(I would have commented this but I do not have enough SO reputation to comment)
You can easily do it with jQuery!
To form the jQuery code in a sentence:
If Input not empty = show "X".
If click on "X" input value = empty
$(".clearable").each(function() {
const $inp = $(this).find("input:text"),
$cle = $(this).find(".clearable__clear");
$inp.on("input", function(){
$cle.toggle(!!this.value);
});
$cle.on("touchstart click", function(e) {
e.preventDefault();
$inp.val("").trigger("input");
});
});
.clearable{
position: relative;
display: inline-block;
}
.clearable input[type=text]{
padding-right: 1em;
box-sizing: border-box;
}
.clearable__clear{
display: none;
position: absolute;
right:0; top:0;
padding: 0 8px;
font-style: normal;
user-select: none;
cursor: pointer;
}
.clearable input::-ms-clear { /* Remove IE default X */
display: none;
}
/*
Font Size
*/
input {
font-size: 30px;
}
.clearable__clear {
font-size: 40px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<span class="clearable">
<input type="text" placeholder="Search...">
<i class="clearable__clear">×</i>
</span>
let slider = document.getElementById("slider");
let rightBtn = document.getElementById("rightbutton");
let leftBtn = document.getElementById("leftbutton");
let element = document.getElementById("elementtype").innerHTML;
let celciusBoiling = document.getElementById("celciusboiling").value;
let chlorine = ["Chlorine", 100, 200];
function moveSliderRight() {
if (rightBtn.onclick) {
slider.value++;
}
}
function moveSliderLeft() {
if (leftBtn.onclick) {
slider.value--;
}
}
function main() {
moveSliderRight();
moveSliderLeft();
if (slider.value == parseInt(2)) {
element = chlorine[0];
celciusBoiling = chlorine[1];
}
}
main();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: peachpuff;
}
header {
width: 90%;
margin: 10px auto 0px;
}
header h1 {
text-align: center;
border: 1px solid black;
padding: 15px 0px;
}
.navbar {
width: 75%;
margin: 50px auto 50px;
padding: 10px 0px;
display: flex;
justify-content: space-around;
border: 1px solid black;
}
.navlinks {
border-right: 1px solid black;
width: 50%;
text-align: center;
display: block;
}
#nav3 {
border: none;
}
#intro {
margin: 0px auto 50px;
width: 40%;
text-align: center;
}
#slider {
-webkit-appearance: none;
background-color: grey;
width: 90%;
display: block;
margin: auto;
}
#slider::-webkit-slider-thumb {
cursor: pointer;
}
#slider::-moz-range-thumb {
cursor: pointer;
}
#valuetag {
text-align: center;
margin-top:25px;
}
h2 {
text-align: center;
font-size: 45px;
text-decoration: underline;
}
#display {
width: 90%;
margin-left: 50px;
margin-bottom: 50px;
font-size: 40px;
}
#display div {
display: inline-block;
width: 45%;
text-align: center;
}
span {
font-size: 15px;
}
.boiling {
margin-left: 6%;
}
.boilingpointslider {
text-align: center;
}
button {
margin: 20px 20px 20px 0px;
width: 75px;
}
<header>
<h1>Periodic Table Gases - Interative Slider</h1>
<nav>
<div class="navbar">
<div class="navlinks">Boiling Point</div>
<div class="navlinks" id="nav3">Melting Point</div>
</div>
</nav>
</header>
<div id="intro">
<p>Interact with the slider buttons to view the displayed properties held by gases, within the periodic table of elements.</p>
</div>
<h2 id="elementtype">Hydrogen</h2>
<div id="display">
<div class="boiling">
<h2>Boiling Point</h2>
<input id="celciusboiling" type="number" value="0"><span>℃</span>
<input id="fahrenboiling" type="number"><span>℉</span>
<input id="kelvinboiling" type="number"><span>K</span>
</div>
<div class="melting">
<h2>Melting Point</h2>
<input id="celciusmelting" type="number"><span>℃</span>
<input id="fahrenmelting" type="number"><span>℉</span>
<input id="kelvinmelting" type="number"><span>K</span>
</div>
</div>
<input type="range" min="0" max="9" value="0" id="slider">
<div class="boilingpointslider">
<button id="leftbutton" onclick="moveSliderLeft()">Left</button>
<button id="rightbutton" onclick="moveSliderRight()">Right</button>
</div>
I am having issues transferring a value to an input field.
Within the snippet linked their is a heading with the value hydrogen and to the bottom left their is a boiling point heading with a input field for celcius.
I'm trying to achieve a scenario whereby you move the slider along using the buttons and at each value the heading changes to a different element and the input value for just the celcius boiling point changes.
I can't get this to work though. The buttons are working to make the slider move left and right, but for whatever reason i cant get the value to appear within the input field or change the heading. I've displayed the code i have already to get the buttons to move the slider and a snippet of what i thought would allow the changes i want to take place when the slider value changes to 2. I cant get it to to work though
Thanks.
You don't show your HTML, but I presume that slider is an input (text or hidden).
The value attribute is a string, even if you assign it a number, so you need to first convert it to a integer if you want to increment or decrement it, like so:
slider.value = parseInt(slider.value)++ // or --
Note that also you are trying to parseInt(2) down in your main(), which makes no sense as 2 is already an integer.
I'm writing a registration form and am trying to sort out some validation. I got this same problem when my validate button was inside the <form> however to fix this I just moved it out as I guessed the button was causing the form to refresh.
However now after inserting multiple if statement into the "ValidateForm()" function this error message has seemed to come back.
Error: Uncaught TypeError: Forename.focus is not a function
at ValidateForm (Login Form Complex.html?Forename=&Surname=&Username=&Password=&Email=:79)
at HTMLButtonElement.onclick (Login Form Complex.html?Forename=&Surname=&Username=&Password=&Email=:63)**
function ValidateForm() {
var Forename = document.getElementById("Forename").value;
var Surname = document.getElementById("Surname").value;
var Username = document.getElementById("Username").value;
var Password = document.getElementById("Password").value;
var Email = document.getElementById("Email").value;
var Errors = 0
if (Forename == "") {
document.LoginForm.Forename.focus();
Forename.focus();
Errors = Errors + 1
}
if (Surname == "") {
document.LoginForm.Forename.focus();
Surname.focus();
Errors = Errors + 1
}
if (Username == "") {
document.LoginForm.Forename.focus();
Username.focus();
Errors = Errors + 1
}
if (Password == "") {
document.LoginForm.Forename.focus();
Password.focus();
Errors = Errors + 1
}
if (Errors != 0) {
alert("Please fill in the highlighted boxes")
return false;
}
}
body {
margin: 0;
padding: 0;
background: url(LoginBack.jpg);
background-size: cover;
background-position: center;
font-family: century gothic;
}
.loginbox {
width: 420px;
height: 680px;
background: #5CDB95;
color: #05386B;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
border-radius: 30px;
}
.avatar {
width: 150px;
height: 150px;
border-radius: 50%;
position: absolute;
top: -75px;
left: calc(50% - 75px);
}
h1 {
margin: 0px;
padding: 0 0 20px;
text-align: center;
font-size: 40px;
}
.loginbox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginbox input {
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"],
input[type="password"],
input[type="email"] {
border: none;
border-bottom: 1px solid #05386B;
background: transparent;
outline: none;
height: 40px;
font-size: 20px;
color: #379683;
}
.loginbox button[type="Submit"] {
border: 2px solid #05386B;
background: #379683;
height: 40px;
width: 362px;
font-size: 20px;
color: ;
border-radius: 20px;
}
.loginbox button[type="submit"]:hover {
cursor: pointer;
background: #8EE4AF;
}
.loginbox a {
text-decoration: none;
font-size: 15px;
line-height: 20px;
color: #379683;
}
.loginbox a:hover {
cursor: pointer;
color: #8EE4AF;
}
.loginbox input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
border: none;
border-bottom: 1px solid #8B0000;
background: transparent;
outline: none;
height: 40px;
font-size: 20px;
color: #8B0000;
}
<div class="loginbox">
<img src="Logo.jpg" class="avatar">
<h1> Create Account </h1>
<form name="LoginForm">
<p>Forename<p><input type="text" name="Forename" id="Forename" placeholder="Enter Forename here">
<p>Surname<p><input type="text" name="Surname" id="Surname" placeholder="Enter Surname here">
<p>Username<p><input type="text" name="Username" id="Username" placeholder="Enter Username here">
<p>Password<p><input type="password" name="Password" id="Password" placeholder="Enter Password here">
<p>Email<p><input type="email" name="Email" id="Email" placeholder="Enter Email here">
<!--
<p>Gender<p><input type="radio" id="Male" name="Gender" value="Male">Male</input>
<input type="radio" id="Female" name="Gender" value="Female">Female</input>
-->
<button onclick="ButtonSubmit()" type="Submit" value="True" name="ButtonSubmit"> Submit </button><br /><br />
Forgot your password? <br />
Already got an account? <br /><br />
</form>
<button onclick="ValidateForm()"> Validate </button>
</div>
Your Forename variable is not holding a reference to a DOM element. It is referencing the .value of that element. The same is true for all of your other DOM variables.
var Forename = document.getElementById("Forename").value;
The value doesn't have a .focus() method. The element does.
In general, it's best not to set variables to properties of DOM elements because, if you determine later that you need a different DOM property, you have to scan the DOM again for a reference you already scanned for. Additionally, setting variables to the DOM elements themselves, and not properties of the elements, will prevent your error, which is very common.
So, change your variables to be set up like this:
var Forename = document.getElementById("Forename");
And then, when you need the value, you can just write:
Forename.value
And, when you want to use the focus() method, just write:
Forename.focus();
You can access whatever aspect of the element you want if you always start from the element itself.
E.g.Forename var have the value of Forename input element then:
var Forename = document.getElementById("Forename"); //DOM element
var fornameValue = Forename.value //value
Forename.focus() //focus function
I have a inputfield and I need to give two trigger. One is dropdown arrow and Another is cancel ("X") image. Here I am creating my inputfield.
My JS
var input = document.createElement("input");
input.className = 'styled-select';
input.style = 'width:30%' ;
input.id = "SearchInput";
input.type = "text";
input.title = "Madd";
input.onclick = TableExpand; // This happening when I clicking on Inputfield
My CSS for Inputfield
* {
box-sizing: border-box;
}
.styled-select {
width: 100px;
height: 20px;
border: 1px solid #95B8E7;
background-color: #fff;
vertical-align: middle;
display: inline-block;
overflow: hidden;
white-space: nowrap;
margin: 0;
padding: 0;
overflow: hidden;
overflow: -moz-hidden-unscrollable;
background: url(combo_arrow.png) no-repeat right white;
position:relative;
border-radius: 5px 5px 5px 5px;
}
.styled-select select {
background: transparent;
-webkit-appearance: none;
width: 100px;
font-size: 11px;
border: 0;
height: 17px;
position: absolute;
left: 0;
top: 0;
}
I need two trigger as I mentioned Arrow and Cross. I am able to give arrow by using background image but don't know how to give Cross image.
Also How I will use this as a trigger. I mean When I click on Cross and Dropdown one it leads me to the one function where I can write my code.
You can put the triggers as absolutely positioned elements on the input field. This way, you can add separate click events on these triggers to be able to perform whatever you want when they are clicked.
Here is an example of what you are trying to achieve:
HTML:
<div id="container">
<input type="text" id="textfield" />
<div id="triggers">
<img class="trigger" src="https://cdn3.iconfinder.com/data/icons/musthave/128/Stock%20Index%20Up.png" id="arrow" />
<img class="trigger" src="https://cdn3.iconfinder.com/data/icons/musthave/128/Remove.png" id="cross" />
</div>
</div>
CSS:
#container {
position: relative;
width: 600px;
}
#textfield {
height:30px;
width: 100%;
}
.trigger{
width: 20px;
}
#triggers {
position: absolute;
right: 0px;
top: 5px;
}
JS:
$(document).ready(function() {
$("#arrow").click(function() {
$("#textfield").val("Arrow was clicked.");
})
$("#cross").click(function() {
$("#textfield").val("Cross was clicked.");
})
})
Here is a working version:
https://jsfiddle.net/1j760ztn/
Your cross and dropdown should be separate buttons. And the javascript you need to listen for them goes like this.
<input type="text" id="theText"><button id="cross"><button id="dropdown">
<script> var cross = document.getElementById('cross'); cross.addEventListener("click", function(){ document.getElementById('theText').innerHTML = 'clicked X' }); </script>
I'm fixing up a form that had a series of areas with two or three duplicate inputs for things like employer name, position, etceteras. I thought it would be easier to just dynamically add them with an onclick button but I am having two major problems: (1) When the onclick event create a new line of inputs the label attributes seems to abandon their css and (2) When you click into the input of the form the label should raise up, but the inputs no longer raise their respective labels.
My questions are (1) What is required to amend the css to keep the labels relative to their inputs and (2) Why/How are the inputs working in the first level of inputs and then not the second? Also, how can I fix this?
Any help would be great!
I've recreated the problem in a minor way in the code pen below. If you click inside the inputs you'll understand what I mean by "raising."
CodePen Example : http://codepen.io/theodore_steiner/pen/WGOaAR
HTML:
<p class="subtitleDirection">Please list your employment histroy in chronological order, beginning with your current position (Limit of Three)</p>
<div class="clearFix"></div>
<div id="employmentHistory">
<div class="input-group" id="employment-history-1">
<input type="text" name="job_1" />
<label class="schoolBoard">School Board</label>
<input type="text" name="position_1" />
<label class="position">Position</label>
<input type="text" name="years_1" />
<label class="years">Years</label>
<button type="button" id="add_job()" onclick="addJob()" value="+">+</button>
</div>
</div><!--end of employmentHistory Div-->
CSS:
input
{
background: none;
border: 1px solid #21a1e1;
margin: 15px;
margin-top: 25px;
margin-left: 15px;
margin-bottom: 25px;
display: inline-block;
height: 30px;
width: 320px;
float: left;
}
.input-group label
{
position: absolute;
left: 17px;
top: 42px;
font-style: italic;
font-size: 17.5px;
color: #999;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
transition: all 0.2s ease;
}
.input-group input:focus+label,
.input-group input.has-value+label {
top: 20px;
font-size: 12px;
color: #aaa;
}
input:focus,
input:active
{
outline: none;
}
input[type="text"],
input[type="email"]
{
border: none;
border-bottom: 1px solid #b3c1cc;
}
.input-group
{
position: relative;
}
#teaching-experience-years input
{
margin-left: 70px;
}
#teaching-experience-years label
{
left: 421px;
}
#employment-history-1 input
{
width: 220px;
float: left;
}
#employment-history-1 label.position
{
left: 265px;
}
#employment-history-1 label.schoolBoard
{
left: 15px;
}
#employment-history-1 label.years
{
left: 514px;
}
JS:
var i = 1;
function addJob()
{
if( i <= 3 )
{
i++;
var div = document.createElement("div");
div.innerHTML = '<div class="input-group" id="employment-history-1"><label class="schoolBoard">School Board</label><input type="text" name="job_'+i+'"><label class="position">Position</label><input type="text" name="position_'+i+'"><label class="years">Years</label><input type="text" name="years_'+i+'"><button type="button" id="add_job()" onclick="addJob()" value="+"></button></div>';
document.getElementById("employmentHistory").appendChild(div);
}
};