Trying to build a registration form, where free emails are not allowed, such as: (gmail|hotmail|yahoo|live|outlook|aol|iCloud|me|yandex|protonmail|gmx)
I wrote the code below, using regex for form validation, but the error message never disappeared!
Is my regex wrong, or is something wrong with my JS or CSS?
// There are many ways to pick a DOM node; here we get the form itself and the email
// input box, as well as the span element into which we will place the error message.
const submit = document.querySelector('.submit');
const email = document.getElementById('email');
const emailError = document.querySelector('span.error');
email.addEventListener('input', function (event) {
// Each time the user types something, we check if the
// form fields are valid.
if (email.validity.valid) {
// If there is an error message visible, if the field
// is valid, we have removed the error message.
emailError.textContent = ''; // Reset the content of the message
// emailError.className = 'error'; // Reset the visual status of the message
emailError.classList.remove('active');
} else {
// If there is still an error, show the correct error
showError();
}
});
submit.addEventListener('click', function (event) {
// if the email field is valid, we will let the form submit
if(!email.validity.valid) {
// If it isn't, we display an appropriate error message
showError();
// Then we prevent the form from being sent by canceling the event
event.preventDefault();
}
});
function showError() {
if(email.validity.valueMissing) {
// If the field is empty,
// display the following error message:
emailError.textContent = 'You need to enter an e-mail address.';
} else if(email.validity.typeMismatch) {
// If the field doesn't contain an email address,
// display the following error message:
emailError.textContent = 'Entered value needs to be an e-mail address.';
} else if(email.validity.tooShort) {
// If the data is too short,
// display the following error message:
emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
}
// Set the styling appropriately
emailError.className = 'error active';
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding:0;
margin:0;}
fieldset, img {border:0}
ol, ul, li {list-style:none}
:focus {outline:none}
body,
input,
textarea,
select {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #4c4c4c;
}
p {
font-size: 12px;
width: 150px;
display: inline-block;
margin-left: 18px;
}
h1 {
font-size: 32px;
font-weight: 300;
color: #4c4c4c;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
html{
background-color: #ffffff;
}
.testbox {
margin: 20px auto;
width: 343px;
height: 464px;
-webkit-border-radius: 8px/7px;
-moz-border-radius: 8px/7px;
border-radius: 8px/7px;
background-color: #ebebeb;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
box-shadow: 1px 2px 5px rgba(0,0,0,.31);
border: solid 1px #cbc9c9;
}
input[type=radio] {
visibility: hidden;
}
form{
margin: 0 30px;
}
label.radio {
cursor: pointer;
text-indent: 35px;
overflow: visible;
display: inline-block;
position: relative;
margin-bottom: 15px;
}
label.radio:before {
background: #3a57af;
content:'';
position: absolute;
top:2px;
left: 0;
width: 20px;
height: 20px;
border-radius: 100%;
}
label.radio:after {
opacity: 0;
content: '';
position: absolute;
width: 0.5em;
height: 0.25em;
background: transparent;
top: 7.5px;
left: 4.5px;
border: 3px solid #ffffff;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type=radio]:checked + label:after {
opacity: 1;
}
hr{
color: #a9a9a9;
opacity: 0.3;
}
input[type=email],input[type=password]{
width: 200px;
height: 39px;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 1px #cbc9c9;
margin-left: -5px;
margin-top: 13px;
padding-left: 10px;
}
input[type=password]{
margin-bottom: 25px;
}
#icon {
display: inline-block;
width: 30px;
background-color: #3a57af;
padding: 8px 0px 8px 15px;
margin-left: 15px;
-webkit-border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
color: white;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 0px #cbc9c9;
}
.gender {
margin-left: 30px;
margin-bottom: 30px;
}
.accounttype{
margin-left: 8px;
margin-top: 20px;
}
a.submit {
font-size: 14px;
font-weight: 600;
color: white;
padding: 6px 25px 0px 20px;
margin: 10px 8px 20px 0px;
display: inline-block;
text-decoration: none;
width: 50px; height: 27px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #3a57af;
-webkit-box-shadow: 0 3px rgba(58,87,175,.75);
-moz-box-shadow: 0 3px rgba(58,87,175,.75);
box-shadow: 0 3px rgba(58,87,175,.75);
transition: all 0.1s linear 0s;
top: 0px;
position: relative;
}
a.button:hover {
top: 3px;
background-color:#2e458b;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/*
input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}
*/
/* This is the style of our error messages */
.error {
width : 100%;
padding: 0;
font-size: 80%;
color: white;
background-color: #900;
border-radius: 0 0 5px 5px;
box-sizing: border-box;
}
.error.active {
padding: 0.3em;
}
<div class="testbox">
<h1>Registration</h1>
<form action="/" novalidate>
<hr>
<div class="accounttype">
<input type="radio" value="None" id="radioOne" name="account" checked/>
<label for="radioOne" class="radio" chec>Personal</label>
<input type="radio" value="None" id="radioTwo" name="account" />
<label for="radioTwo" class="radio">Company</label>
</div>
<hr>
<label id="icon" for="name"><i class="fas fa-envelope"></i></label>
<input type="email" name="email" id="email" placeholder="Email"
pattern="/[\w\-\.]+#(?!(gmail|hotmail|yahoo|live|outlook|aol|iCloud|me|yandex|protonmail|gmx))[\w\.]+$/gm"
required/>
<span class="error" aria-live="polite"></span>
<p>By clicking Register, you agree on our terms and condition.</p>
Register
</form>
</div>
the / should not be included in pattern attr. so we would not able to specify im option after '/', the pattern string is compiled with ignoreCase option by default
email.validity.patternMismatch was not handled in showError
Here is the proper Regulex
// There are many ways to pick a DOM node; here we get the form itself and the email
// input box, as well as the span element into which we will place the error message.
const submit = document.querySelector('.submit');
const email = document.getElementById('email');
const emailError = document.querySelector('span.error');
email.addEventListener('input', function (event) {
// Each time the user types something, we check if the
// form fields are valid.
// console.log(email.validity);
if (email.validity.valid) {
// In case there is an error message visible, if the field
// is valid, we remove the error message.
emailError.textContent = ''; // Reset the content of the message
// emailError.className = 'error'; // Reset the visual state of the message
emailError.classList.remove('active');
} else {
// If there is still an error, show the correct error
showError();
}
});
submit.addEventListener('click', function (event) {
// if the email field is valid, we let the form submit
if(!email.validity.valid) {
// If it isn't, we display an appropriate error message
showError();
// Then we prevent the form from being sent by canceling the event
event.preventDefault();
}
});
function showError() {
if(email.validity.valueMissing) {
// If the field is empty,
// display the following error message.
emailError.textContent = 'You need to enter an e-mail address.';
} else if(email.validity.typeMismatch) {
// If the field doesn't contain an email address,
// display the following error message.
emailError.textContent = 'Entered value needs to be an e-mail address.';
} else if (email.validity.patternMismatch) {
// pattern match failed
emailError.textContent = 'Entered value needs to be an e-mail address.';
for (let p of 'gmail|hotmail|yahoo|live|outlook|aol|iCloud|me|yandex|protonmail|gmx'.split('|')) {
if (email.value.indexOf('#'+p) !== -1) {
emailError.textContent = 'Your email provider is not supported.';
break;
}
}
} else if(email.validity.tooShort) {
// If the data is too short,
// display the following error message.
emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
}
// Set the styling appropriately
emailError.className = 'error active';
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding:0;
margin:0;}
fieldset, img {border:0}
ol, ul, li {list-style:none}
:focus {outline:none}
body,
input,
textarea,
select {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #4c4c4c;
}
p {
font-size: 12px;
width: 150px;
display: inline-block;
margin-left: 18px;
}
h1 {
font-size: 32px;
font-weight: 300;
color: #4c4c4c;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
html{
background-color: #ffffff;
}
.testbox {
margin: 20px auto;
width: 343px;
height: 464px;
-webkit-border-radius: 8px/7px;
-moz-border-radius: 8px/7px;
border-radius: 8px/7px;
background-color: #ebebeb;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
box-shadow: 1px 2px 5px rgba(0,0,0,.31);
border: solid 1px #cbc9c9;
}
input[type=radio] {
visibility: hidden;
}
form{
margin: 0 30px;
}
label.radio {
cursor: pointer;
text-indent: 35px;
overflow: visible;
display: inline-block;
position: relative;
margin-bottom: 15px;
}
label.radio:before {
background: #3a57af;
content:'';
position: absolute;
top:2px;
left: 0;
width: 20px;
height: 20px;
border-radius: 100%;
}
label.radio:after {
opacity: 0;
content: '';
position: absolute;
width: 0.5em;
height: 0.25em;
background: transparent;
top: 7.5px;
left: 4.5px;
border: 3px solid #ffffff;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type=radio]:checked + label:after {
opacity: 1;
}
hr{
color: #a9a9a9;
opacity: 0.3;
}
input[type=email],input[type=password]{
width: 200px;
height: 39px;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 1px #cbc9c9;
margin-left: -5px;
margin-top: 13px;
padding-left: 10px;
}
input[type=password]{
margin-bottom: 25px;
}
#icon {
display: inline-block;
width: 30px;
background-color: #3a57af;
padding: 8px 0px 8px 15px;
margin-left: 15px;
-webkit-border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
color: white;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 0px #cbc9c9;
}
.gender {
margin-left: 30px;
margin-bottom: 30px;
}
.accounttype{
margin-left: 8px;
margin-top: 20px;
}
a.submit {
font-size: 14px;
font-weight: 600;
color: white;
padding: 6px 25px 0px 20px;
margin: 10px 8px 20px 0px;
display: inline-block;
text-decoration: none;
width: 50px; height: 27px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #3a57af;
-webkit-box-shadow: 0 3px rgba(58,87,175,.75);
-moz-box-shadow: 0 3px rgba(58,87,175,.75);
box-shadow: 0 3px rgba(58,87,175,.75);
transition: all 0.1s linear 0s;
top: 0px;
position: relative;
}
a.button:hover {
top: 3px;
background-color:#2e458b;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/*
input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}
*/
/* This is the style of our error messages */
.error {
width : 100%;
padding: 0;
font-size: 80%;
color: white;
background-color: #900;
border-radius: 0 0 5px 5px;
box-sizing: border-box;
}
.error.active {
padding: 0.3em;
}
<div class="testbox">
<h1>Registration</h1>
<form action="/" novalidate>
<hr>
<div class="accounttype">
<input type="radio" value="None" id="radioOne" name="account" checked/>
<label for="radioOne" class="radio" chec>Personal</label>
<input type="radio" value="None" id="radioTwo" name="account" />
<label for="radioTwo" class="radio">Company</label>
</div>
<hr>
<label id="icon" for="name"><i class="fas fa-envelope"></i></label>
<input type="email" name="email" id="email" placeholder="Email"
pattern="^[\w\-\.]+#(?!(gmail|hotmail|yahoo|live|outlook|aol|iCloud|me|yandex|protonmail|gmx))\w+(\.\w+)+$"
required/>
<span class="error" aria-live="polite"></span>
<p>By clicking Register, you agree on our terms and condition.</p>
Register
</form>
</div>
I have a scenario,that I used css for extending search box on focus,when I focussed on search box then the search box must decrease and the cancel button must be placed beside of search box.
Css:
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
}
: content-box;
font-size: 100%;
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat 10px center;
padding-left:40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing
}
Here is my plunker link:
https://plnkr.co/edit/Z7mfglWEoDyjbDfFDbLM?p=preview
And the expected output will be like this:
Is it possible with Angularjs or JavaScript?
Possible solution would be to position the div you want absolutely. Then on focus of the input, make the div visible or slide it into view;
Using your plunk, add the following CSS:
.clrble{
position: relative;
}
.frmcntr:focus + .btn{
display: block;
}
.btn{display: none; position: absolute; right: 0;}
and here's the HTML:
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<div class="btn">button here</div>
</div>
It's not perfect, but i think it will point you in the right direction.
with float property you can mange the side by side positions.
use float:left; css property for you textbox class and that will work for your requirement and the placement of button also can be handle by css also.
css for textbox
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;
}
You can just hide and show a span with 'cancel' in it.
/* Styles go here */
.clrble .frmcntr {
background: url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family: SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color: rgba(247, 247, 247, 1);
}
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
background-color: rgba(247, 247, 247, 1);
background: url("images/search.png") no-repeat 10px center;
padding-left: 40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size: 100%;
}
.clrble {
position: relative;
}
.frmcntr:focus+.btn {
display: block;
}
.btn {
display: none;
position: absolute;
right: 0;
}
.cancel {
visibility: hidden;
color: blue;
font-family: sans-serif;
font-size: 20px;
}
.frmcntr:focus + .cancel {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<span class="cancel">Cancel</span>
<span class="btn">button here</span>
</div>
</body>
</html>
You can use the blur event for the input and the mousedown event as mousedown event fires before the blur event.
var mouseDown = false;
$('input').blur(function() {
if(mouseDown) // cancel the blur event
{
$('input').focus();
mouseDown = false;
}
});
$('#cancelBtn').mousedown(function(){
mouseDown = true;
console.log('Button Clicked');
});
$('input').focus(function(){
$('#cancelBtn').css('display', 'block');
});
$('input').focusout(function(){
$('#cancelBtn').css('display', 'none');
});
/* Styles go here */
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;
}
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: green;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat 10px center;
padding-left:40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size: 100%;
}
#cancelBtn {
color:blue;
float:left;
font-weight:bold;
display:none;
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<div id="cancelBtn">Cancel</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Sun, 12 Feb 2017 03:36:45 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
form {
max-width: 500px;
margin: 10px auto;
padding: 10px 10px;
background: #fff;
color: #071b51;
border: 1px #071b51;
border-radius: 8px;
}
.loginpopup:hover {
background-color: #071b51;
color: #fff;
}
/*hover on span*/
.popuptext:hover {
pointer-events: auto;
}
.show {
visibility: visible;
}
.loginpopup {
position: relative;
display: inline-block;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 19px 39px 18px 39px;
background-color: #071b51;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 10px;
border: 1px solid #072583;
border-width: 1px 1px 3px;
border-color: #fff;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
color:#fff;
}
.popuptext {
visibility:hidden;
width: 400px;
background-color: #fff;
color: #071b51;
text-align: center;
border-radius: 6px;
padding: 10px 10px;
position: absolute;
z-index: 1;
bottom: -1000%;
left: 0%;
margin-left: -500px;
}
</style>
</head>
<body>
<div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;">Login</div>
<span id="myPopup" class="popuptext" style="border: solid 10px #071b51;">
<form>
<h1>Login</h1>
<fieldset>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" style="border:solid 1px #071b51; border-radius: 5px;">
<label for="password">Password:</label>
<input type="password" id="password" name="user_password" style="border:solid 1px #071b51; border-radius: 5px;">
</fieldset>
<button type="submit">Login</button>
</form>
</span>
<!--JS for all actions on main page-->
<script>
//open myPopup
function openPopup() {
var popup1 = document.getElementById("myPopup");
popup1.classList.toggle("show");
}
</script>
</body>
</html>
Can someone help me figure out the problem with this? Initially, "myPopup"'s visibility attribute is set to "hidden". Later, when "loginbutton" is clicked (onclick() ), the function "openPopup()" is called which sets "myPopup"'s visibility attribute is set to "visible" via the class "show". However, "myPopup" remains hidden. Is there something I've overlooked? Thanks
Your javascript correctly adds show class to #myPopup. However, that doesn't change anything in how it is displayed because:
.popuptext is defined later in CSS than .show and, having the same specificity (1 class) effectively overrides it.
.popuptext has a bottom:-1000% (that's a lot) and also a margin-left of -500px, which makes it render outside the screen.
I removed the offending rules and also placed .show below .popuptext in CSS.
function openPopup() {
var popup1 = document.getElementById("myPopup");
popup1.classList.toggle("show");
}
form {
max-width: 500px;
margin: 10px auto;
padding: 10px 10px;
background: #fff;
color: #071b51;
border: 1px #071b51;
border-radius: 8px;
}
.loginpopup:hover {
background-color: #071b51;
color: #fff;
}
/*hover on span*/
.popuptext:hover {
pointer-events: auto;
}
.loginpopup {
position: relative;
display: inline-block;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 19px 39px 18px 39px;
background-color: #071b51;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 10px;
border: 1px solid #072583;
border-width: 1px 1px 3px;
border-color: #fff;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
color:#fff;
}
.popuptext {
visibility:hidden;
width: 400px;
background-color: #fff;
color: #071b51;
text-align: center;
border-radius: 6px;
padding: 10px 10px;
position: absolute;
z-index: 1;
left: 0%;
}
.show {
visibility: visible;
}
<div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;">Login</div>
<span id="myPopup" class="popuptext" style="border: solid 10px #071b51;">
<form>
<h1>Login</h1>
<fieldset>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" style="border:solid 1px #071b51; border-radius: 5px;">
<label for="password">Password:</label>
<input type="password" id="password" name="user_password" style="border:solid 1px #071b51; border-radius: 5px;">
</fieldset>
<button type="submit">Login</button>
</form>
</span>
Your element is positioned way off the page.
Remove bottom:1000% and margin-left:-500px from .popuptext and it'll work fine.
The problem is your positioning. Your code is actually working as expected, but the popup is being pushed off of the page. Try this css:
.popuptext {
visibility:hidden;
width: 400px;
background-color: #fff;
color: #071b51;
text-align: center;
border-radius: 6px;
padding: 10px 10px;
position: absolute;
z-index: 1;
/*bottom: -1000%;*/
/*margin-left: -500px;*/
left: 0%;
}
A quick inspection in Chrome Dev Tools inspector shows this after you click on the 'Login':
The class is correctly added, but the "visibility" property in 'show' class gets overridden by "visibility" property in 'popuptext' class. This is because 'popuptext' is defined AFTER 'show' class inside your style tag and both the classes have same weightage (or Specificity in CSS terms).
Correction 1 : Place the 'popuptext' class BEFORE 'show' class.
This will override the "visibility" property as you would have wanted.
The pop-up still won't be visible on UI. This is because of huge negative margin set for margin-left property in "popuptext" class. Also, the bottom property has a very high value. This will place your popup far below at the bottom of page.
Correction 2 : Adjust your margin-left and bottom property as well.
I have a small piece of code and i wanted to know that how can I do when I click on outside div class="gutte" and this div should be go focusout. I snippet my code down and this is not focusout when I click on outside of div class="gutte" (or <body> ) and i cannot use input type[text]. When I click on btn1 div class="gutte" focus but one I click on another part (in input type text) it goes focusout.. How could I do this ? I am using jQuery framework.
var tt = $.noConflict();
tt(document).ready(function($) {
$(".qta").focus(function() {
$(".gutt").css({
'display': 'inline-block'
});
$(".gutte").addClass('grandisciti');
});
$(".gutte").focusout(function() {
$(".gutt").css({
'display': 'none'
});
$(".gutte").removeClass('grandisciti');
});
});
body {
width: 100%;
height: 100%;
background-color: #c1c2c3;
}
.gutte {
box-sizing: border-box;
position: relative;
display: block;
width: 550px;
height: 50px;
background-color: #fff;
color: #000;
margin: 0px;
padding: 0px;
margin-left: 32%;
margin-top: 30px;
padding-top: 2.5px;
padding-left: 1px;
padding-bottom: 2px;
border-radius: 10px;
border-radius: 10px;
text-align: center;
}
.ati {
box-sizing: border-box;
position: static;
display: inline-block;
width: 105px;
height: 45px;
margin: 0px;
padding: 0px;
padding: 0px 10px;
border: none;
background-color: #ccc;
/*border:2px solid #ccc;*/
border-radius: 10px;
outline: none;
cursor: pointer;
transition: 0.8s all;
font-size: 120%;
color: #000;
}
.grandisciti {
width: 600;
height: 300px;
-webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
}
.gutt {
display: none;
width: 530px;
margin:10px;
background-color: #000;
}
.tref {
display: inline-block;
width: 80%;
height: 100px;
resize: none;
outline: none;
padding: 10px;
margin: 15px;
border: 5px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
body
<div tabindex="1" class="gutte">
<div class="irj fjr_p05gure rddre ">
<button class="ati qta ">btn1</button>
<button class="ati ">btn2</button>
<button class="ati ">bt3</button>
</div>
<span class="gutt">
<input type="text" class="tref"/>
</span>
</div>
When you focus in a element, any element that has focused make focusout, then target element make focused. See this example for better understanding.
$("input").focus(function(){
console.log(this.name + " focused");
}).blur(function(){
console.log(this.name + " blured");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="A" />
<input name="B" />
<input name="C" />
You need to add focus event to any button like this:
Answer:
Jsfiddle
I have written small piece of code where i have a div container and in that div has spans and forms textbox btns. when i click on btn1, container height increase and show an textbox but when i click on textbox div goes focus out. How is possible that when i click on btn1 and its stay focus in even i click on textbox(after click on btn1 and show blackbox) it shouldnt goes focusout and when i click out site of container it should goes focusout ? how can i do please help me ?
var tt = $.noConflict();
tt(document).ready(function($) {
$(".qta").focus(function() {
$(".gutt").css({
'display': 'inline-block'
});
$(".gutte").addClass('grandisciti');
});
$(".gutte").focusout(function() {
$(".gutt").css({
'display': 'none'
});
$(".gutte").removeClass('grandisciti');
});
});
body {
width: 100%;
height: 100%;
background-color: #c1c2c3;
}
.gutte {
box-sizing: border-box;
position: relative;
display: block;
width: 550px;
height: 50px;
background-color: #fff;
color: #000;
margin: 0px;
padding: 0px;
margin-left: 32%;
margin-top: 30px;
padding-top: 2.5px;
padding-left: 1px;
padding-bottom: 2px;
border-radius: 10px;
border-radius: 10px;
text-align: center;
}
.ati {
box-sizing: border-box;
position: static;
display: inline-block;
width: 105px;
height: 45px;
margin: 0px;
padding: 0px;
padding: 0px 10px;
border: none;
background-color: #ccc;
/*border:2px solid #ccc;*/
border-radius: 10px;
outline: none;
cursor: pointer;
transition: 0.8s all;
font-size: 120%;
color: #000;
}
.grandisciti {
width: 600;
height: 300px;
-webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
}
.gutt {
display: none;
width: 530px;
margin:10px;
background-color: #000;
}
.tref {
display: inline-block;
width: 80%;
height: 100px;
resize: none;
outline: none;
padding: 10px;
margin: 15px;
border: 5px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
body
<div tabindex="1" class="gutte">
<div class="irj fjr_p05gure rddre ">
<button class="ati qta ">btn1</button>
<button class="ati ">btn2</button>
<button class="ati ">bt3</button>
</div>
<span class="gutt">
<input type="text" class="tref"/>
</span>
</div>
Have a close look at the event passed to the focusout function, in particular the target attribute. Your gutte div will likely be catching a focusout event generated by the button. You will need to put in some conditions so that you don't collapse gutte when focus is moving around within gutte.