I want when user focuses on input field the label and border of input field should be red and when user leaves both label and border of input field should turn to green. Also when user focuses and does not enter any value both label and border again in red color.
.field {
position: relative;
}
.inName {
position: absolute;
outline: none;
z-index: 1;
border: 1px solid silver;
}
.laName {
position: absolute;
top: 7px;
left: 10px;
pointer-events: none;
font-size: 20px;
color: rgb(95, 99, 105);
z-index: 1;
background: #fff;
transition: .3s;
}
.inName:focus+.laName {
top: -12px;
font-size: 15px;
padding: 0 5px;
color: crimson;
}
.inName:not(:placeholder-shown).inName:not(:focus)+.laName {
position: absolute;
top: -12px;
pointer-events: none;
padding: 0 5px;
font-size: 15px;
background-color: #ffffff;
color: crimson;
z-index: 1;
transition: .3s;
}
.inName:focus {
border: 1px solid crimson;
}
<div class="field name">
<input type="text" class="inName" placeholder=" ">
<label for="" class="laName">Name</label>
</div>
Here, I think you could add color: green in your .inName:not(:placeholder-shown).inName:not(:focus)+.laName class and also add another class .inName:not(:placeholder-shown).inName:not(:focus) that will have border set to green. Here's your code with the changes(I commented where the changes are):
<!DOCTYPE html><html>
<head>
<style>
.field {
position: relative;
}
.inName {
position: absolute;
outline: none;
z-index: 1;
border: 1px solid silver;
}
.laName {
position: absolute;
top: 7px;
left: 10px;
pointer-events: none;
font-size: 20px;
color: rgb(95, 99, 105);
z-index: 1;
background: #fff;
transition: .3s;
}
.inName:focus+.laName {
top: -12px;
font-size: 15px;
padding: 0 5px;
color: crimson;
}
.inName:not(:placeholder-shown).inName:not(:focus)+.laName {
position: absolute;
top: -12px;
pointer-events: none;
padding: 0 5px;
font-size: 15px;
background-color: #ffffff;
/*CHANGE HERE COLOR TO GREEN*/
color: green;
z-index: 1;
transition: .3s;
}
.inName:focus {
border: 1px solid crimson;
}
/*ADD THIS*/
.inName:not(:placeholder-shown).inName:not(:focus){
border: 1px solid green;
}
</style>
</head>
<body>
<div class="field name">
<input type="text" class="inName" placeholder=" ">
<label for="" class="laName">Name</label>
</div>
</body>
</html>
That can be done using JS event listeners - focus and change
Here is a fast scratch of what you can do:
document.getElementsByTagName("input")[0].addEventListener("focus", focus);
document.getElementsByTagName("input")[0].addEventListener("change", focus);
function focus() {
var input = document.getElementsByTagName("input")[0];
if (input.value.length === 0) {
input.style.borderColor = "red"; // for input
input.nextElementSibling.style.color = "red"; // for label
} else {
input.style.borderColor = "green"; // for input
input.nextElementSibling.style.color = "green"; // for label
}
}
Also set input border color to green in CSS as default for the first load.
Related
I have one input type field which is google inspired input type with label animation which has onfocus event and In one of the Input fields has the Password field in which I have to apply eye-toggle functionality with onclick event. I am sharing a screenshot of the input type.
When I am trying to implement toggle functionality for passwords. onclick event is not able to trigger because of the onfocus event.
Here is the code for the toggle.
CSS and icon.
.form-row {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col-3 {
max-width: 485px;
-webkit-box-flex: 0;
flex: 0 0 485px;
}
.inputfield {
margin-bottom: 24px;
margin-right: 20px;
position: relative;
}
.inputfield .form-label{
position: absolute;
top: 23px;
left: 20px;
cursor: text;
transition: top 250ms ease-in-out, left 250ms ease-in-out, font-size 250ms ease-in-out
}
.inputfield input{
margin: 8px 0;
}
.inputfield-control {
width: 100%;
height: 50px;
border: 1.5px solid #C4C4C4;
border-radius: 5px;
outline: none;
background: none;
padding-left: 16px;
position: relative;
}
.inputfield-control:focus {
border: 1.5px solid #2464E4;
}
.inputfield-control:focus ~ .form-label {
top: 0px;
left: 20px;
font-size:13px;
font-weight: 400;
color: #232323;
background-color: #ffffff;
z-index: 10;
padding-left: 4px;
padding-right: 4px;
}
.inputfield-control:not(:placeholder-shown).inputfield-control:not(:focus)~.form-label {
top: 0px;
left: 20px;
font-size:13px;
font-weight: 400;
color: #232323;
background-color: #ffffff;
z-index: 10;
padding-left: 4px;
padding-right: 4px;
}
.show-password-icn {
font-size: 22px !important;
margin-top: -40px;
margin-right: 30px;
color: #767676;
float: right;
}
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css"></script>
Because of the Animation in the input field toggle click event is not even triggered.
$(document).on('click', '.toggle-password', function() {
$(this).toggleClass("icon ion-md-eye");
var input = $("#Password");
input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-3 inputfield">
<input type="password" id="Password" name="Password" class="inputfield-control" placeholder=" ">
<label class="form-label">New Password</label>
<div class="input-group-append custom">
<span toggle="#password-field" class="icon ion-md-eye-off field-icon toggle-password show-password-icn"></span>
<br>
</div>
</div>
I have tried to perform another click event instead of the click event, but still, any of the click events are not working with Animation.
Please update some CSS as per below:
.inputfield-control {
width: 100%;
height: 50px;
border: 1.5px solid #C4C4C4;
border-radius: 5px;
outline: none;
background: none;
padding-left: 16px;
position: relative;
padding-right: 70px;
}
.input-group-append.custom {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30px;
z-index: 1;
}
.show-password-icn {
font-size: 22px !important;
color: #767676;
}
Please let me know if you still have any issues.
I need to create an input with a border that will change when the input is focused.
The inputs should works in that way:
When input is not focused and is empty, the label should be inside the input:
Input without focus
When user focus the input, or input is filled, the label will move up and the border should be cropped so the label is not obscured by the border.
Input with focus
I've tried with adding before element on label with background, but i realized this is not the correct way because input has not background itself and depend on the subpage there can be other background color and finally the resould looked like this:
Input with focus
Input without focus
Could you please help me with this?
You can try the below code
HTML
<div class="input-control">
<input type="text" required>
<label>Placeholder</label>
</div>
CSS
.input-control {
position: relative;
}
input {
display: inline-block;
border: 1px solid #ccc;
padding: 10px;
}
input:focus {
border: 1px solid red;
background-color:#fff;
}
label {
color: #999;
position: absolute;
pointer-events: none;
left: 10px;
top: 10px;
transition: 0.2s;
}
input:focus ~ label,
input:valid ~ label {
top: -8px;
left: 10px;
font-size: 12px;
color: red;
background-color:#fff;
padding:0 5px 0 5px;
}
You can go with this approach
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 62.5%;
background: #FFF;
}
div.centralize {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
div.input-block {
position: relative;
}
div.input-block input {
font-weight: 500;
font-size: 1.6rem;
color: #495055;
width: 350px;
padding: 15px 15px;
border-radius: 1rem;
border: 2px solid #D9D9D9;
outline:none;
}
div.input-block span.placeholder {
position: absolute;
margin: 17px 0;
padding: 0 4px;
font-family: Roboto, sans-serif;
color: #6c757d;
display: flex;
align-items: center;
font-size: 1.6rem;
top: 0;
left: 17px;
transition: all 0.2s;
transform-origin: 0% 0%;
background: none;
pointer-events: none;
}
div.input-block input:valid + span.placeholder,
div.input-block input:focus + span.placeholder {
transform: scale(0.8) translateY(-30px);
background: #fff;
}
div.input-block input:focus{
color: #284B63;
border-color: #284B63;
}
div.input-block input:focus + span.placeholder {
color: #284B63;
}
<div class="centralize">
<div class="input-block">
<input type="text" name="input-text" id="input-text" required spellcheck="false">
<span class="placeholder">
Placeholder
</span>
</div>
</div>
Check out the code below. There's no way to actually crop a border, but you can construct the top border from 2 separate elements and then shrink the right element as needed - this way you don't have to worry about the flaws of the background workaround.
let field = document.querySelector('.field');
let input = document.querySelector('.input-field');
let label = document.querySelector('.label');
let border = document.querySelector('.shrink');
input.addEventListener("click", () => {
let displacement = label.offsetWidth + 14;
// get label width, plus hardcoded gap which should ideally be computed (the initial 10px gap + 4px to give the label some space)
field.classList.add('active');
border.style.width = 'calc(100% - ' + displacement + 'px)';
})
body {
background: URL('https://www.toptal.com/designers/subtlepatterns/uploads/just-waves.png')
}
* {
font-family: sans-serif;
}
.field {
position: relative;
width: auto;
display: inline-block;
}
input {
border: none;
padding: 12px;
border-radius: 10px;
background: transparent;
outline: none;
border: 2px solid #000;
border-top: none;
position: relative;
}
.b1 {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 8px;
border-radius: 10px 0 0 0;
border-top: 2px solid #000;
}
.b2 {
content: '';
position: absolute;
top: 0;
right: 0;
width: calc(100% - 10px); /* subtract 10px to account for left corner border */
height: 8px;
border-radius: 0 10px 0 0;
border-top: 2px solid #000;
}
label {
position: absolute;
top: 12px;
left: 12px;
transition: all ease-in-out .1s;
}
.field.active label {
transform: translateY(-20px);
}
<div class="field">
<div class="top-border">
<div class="b1"></div>
<div class="b2 shrink"></div>
</div>
<label class="label">test label</label>
<input type="text" class="input-field">
</div>
Inside my Angular app , i ve this form template :
<div class="row">
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Name</span>
<button class="reset_input border-0 bg-transparent p-0 m-0"><i class="icon-delete"></i>
</button>
</label>
<span class="error "><span class="alert-icon icon-error-severe" aria-hidden="true"></span>Caractère invalide</span>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Surname</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">CIN</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Ville</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Departement</span>
</label>
</div>
</div>
</div>
And i'm applying this css :
.bloc_advanced_search {
padding-top: 0.938rem;
position: relative;
margin-bottom: 1.875rem;
padding-bottom: 0.938rem;
}
#search_collapse { padding-top: 1.563rem;}
#search_collapse.show {
padding-bottom: 2.813rem;
}
.bloc_advanced_search .title_home {
font-size: 1.875rem;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.13;
letter-spacing: normal;
color: #ffffff;
padding-bottom: 0.9375rem;
position: relative;
width: calc(100% - 3.75rem);
}
.bloc_advanced_search .title_home::after {
position: absolute;
bottom: 0;
left: 0;
width: 1.875rem;
height: 0.375rem;
content: "";
background: #ff7900;
}
.bloc_advanced_search .form-input {
margin: 0 0 1.25rem;
width: 100%;
}
.bloc_advanced_search .form-input label {
position: relative;
display: block;
width: 100%;
min-height: 2.813rem;
}
.bloc_advanced_search .form-input .placeholder {
position: absolute;
display: block;
top: 1.375rem;
z-index: 2;
font-size: 1.125rem;
transition: all 200ms ease-in-out;
width: 100%;
cursor: text;
color: #808080;
}
.bloc_advanced_search .form-input input {
background: #000;
position: absolute;
top: 0.625rem;
z-index: 1;
width: 100%;
font-size: 1.125rem;
border: 0;
border-bottom: 1px solid #d8d8d8;
transition: border-color 200ms ease-in-out;
outline: none;
padding: 0;
margin: 0;
color: #fff;
padding-right: 2.813rem;
border-radius: 0;
box-shadow: none;
outline: none;
}
.bloc_advanced_search .form-input input {
height: 2.813rem;
}
.bloc_advanced_search .form-input input::-ms-clear {
display: none;
}
.bloc_advanced_search .form-input input:focus,
.bloc_advanced_search .form-input input:valid {
border-bottom: 2px solid #fff;
}
.bloc_advanced_search .form-input input:focus + .placeholder,
.bloc_advanced_search .form-input input:valid + .placeholder {
top: 0;
cursor: inherit;
font-size: 0.75rem;
color: #808080;
}
.bloc_advanced_search .btn-bottom {
padding-top: 1.25rem;
}
.bloc_advanced_search .rectangle {
width: 3.125rem;
height: 3.125rem;;
padding: 1.188rem 1rem;
background-color: #ff7900;
color: #fff;
position: absolute;
right: 0.938rem;
top: 0;
}
.bloc_advanced_search .rectangle::after {
content: "\e93f";
font-family: icon-orange, sans-serif;
transform: rotate(90deg);
display: block;
font-size: 1.25rem;
vertical-align: top;
margin-top: -0.313rem;
}
.bloc_advanced_search .rectangle.disabled {
background-color: #333333;
color: #000;
}
.bloc_advanced_search.interne .rectangle {
top: -0.938rem;
}
.bloc_advanced_search.interne .rectangle[aria-expanded=false]::after {
transform: rotate(-90deg);
}
.bloc_advanced_search .reset_input {
position: absolute;
right: 0.625rem;
bottom: -0.188rem;
font-size: 1.5rem;
z-index: 2;
color: #fff;
line-height: normal;
}
My problem is in particular in IPAD mode ,
When changing my focus from an input to another , the IOS Keyboard seems to be closed and reopened betwen an input to another , that results me to double click each time on every input to get it fosused (and in parallel a close/open keyboard each time
My purpose , is to , to keep the keyboard appearing when flying from an input to another , and with a simple one ckick , setting focus on desired input and beeing able to write.
Of course when click outside the form or inputs zone , the keyboard should diseppear .
Is there any simple way to do it properly ??
i correct it
by changing z-index , and making the input in front of the placeholder
Furthemore i set the background of input as transparent to make the plaeholder visible also
.bloc_advanced_search .form-input input {
background: transparent; /* <- THIS */
position: absolute;
top: 0.625rem;
z-index: 3; /* <- THIS */
width: 100%;
font-size: 1.125rem;
border: 0;
border-bottom: 1px solid #d8d8d8;
transition: border-color 200ms ease-in-out;
outline: none;
padding: 0;
margin: 0;
color: #fff;
padding-right: 2.813rem;
border-radius: 0;
box-shadow: none;
outline: none;
}
I am looking for assistance with the JS to animate the placeholder to move above the input box on selection. I have trialled various pieces of coding and this seems to be the closest to achieve the result.
I have tried to apply the following JS Script but it seems to be throwing an error. It may be an error with the jquery.
If you can provide any help it would be much appreciated.
$('input').focus(function(){
$(this).parents('.billing_first_name_field').addClass('focused');
});
$('input').blur(function(){
var inputValue = $(this).val();
if ( inputValue == "" ) {
$(this).parents('.billing_first_name_field').removeClass('focused');
} else {
$(this).addClass('filled');
}
})
Here is the HTML and the CSS I have applied.
.formRow {
position: relative;
width: 100%;
}
.formRow--item {
display: block;
width: 100%;
}
.input-text {
position: relative;
padding: 15px 20px 11px;
width: 100%;
outline: none;
border: solid 1px rgb(149, 152, 154);
border-radius: 4px;
color: rgb(44, 50, 53);
letter-spacing: .2px;
font-weight: 400;
font-size: 16px;
resize: none;
transition: all .2s ease;
}
.screen-reader-text {
position: relative;
display: block;
width: 100%;
}
.screen-reader-text.active {
.placeholder {
top: -5px;
background-color: #ffffff;
color: #fd999a;
text-transform: uppercase;
letter-spacing: .8px;
font-size: 11px;
line-height: 14px;
transform: translateY(0);
}
}
.screen-reader-text:not(:focus):not(:hover) {
& ~ .placeholder {
color: #fec8c9;
}
}
.input-text {
&:focus,
&:hover {
border-color: red;
}
}
.placeholder {
position: absolute;
top: 50%;
left: 10px;
display: block;
padding: 0 10px;
color: rgb(149, 152, 154);
white-space: nowrap;
letter-spacing: .2px;
font-weight: normal;
font-size: 16px;
transition: all, .2s;
transform: translateY(-50%);
pointer-events: none;
user-select: none;
}
<div class="woocommerce-billing-fields__field-wrapper">
<p class="form-row form-row-first validate-required validate-required" id="billing_first_name_field" data-priority="">
<label for="billing_first_name" class="screen-reader-text"><abbr class="required" title="required">
</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text" name="billing_first_name" id="billing_first_name" placeholder="First name" value="" autocomplete="given-name">
</span>
</p>
Thanks very much!
I didn't waste my time fixing your bad indentation practices, but here's a quick and dirty solution:
$(function(){ // load
const inputText = $('.input-text');
inputText.focus(function(){
const t = $(this);
if(t.val() === ''){
t.addClass('fade_white');
setTimeout(()=>{
t.attr('placeholder', ''); t.removeClass('fade_white');
}, 270);
}
else{
t.attr('placeholder', '');
}
});
inputText.blur(function(){
$(this).attr('placeholder', 'First name');
});
});// end load
.formRow {
position: relative;
width: 100%;
}
.formRow--item {
display: block;
width: 100%;
}
.input-text {
position: relative;
padding: 15px 20px 11px;
width: 100%;
outline: none;
border: solid 1px rgb(149, 152, 154);
border-radius: 4px;
color: rgb(44, 50, 53);
letter-spacing: .2px;
font-weight: 400;
font-size: 16px;
resize: none;
transition: all .2s ease;
}
.screen-reader-text {
position: relative;
display: block;
width: 100%;
}
.screen-reader-text.active {
.placeholder {
top: -5px;
background-color: #ffffff;
color: #fd999a;
text-transform: uppercase;
letter-spacing: .8px;
font-size: 11px;
line-height: 14px;
transform: translateY(0);
}
}
.screen-reader-text:not(:focus):not(:hover) {
& ~ .placeholder {
color: #fec8c9;
}
}
.input-text {
&:focus,
&:hover {
border-color: red;
}
}
.placeholder {
position: absolute;
top: 50%;
left: 10px;
display: block;
padding: 0 10px;
color: rgb(149, 152, 154);
white-space: nowrap;
letter-spacing: .2px;
font-weight: normal;
font-size: 16px;
transition: all, .2s;
transform: translateY(-50%);
pointer-events: none;
user-select: none;
}
/* not my CSS above here - fix yours */
.input-text{
transition:color 0.25s ease-in-out; color:#000;
}
.input-text.fade_white{
color:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woocommerce-billing-fields__field-wrapper">
<p class="form-row form-row-first validate-required validate-required" id="billing_first_name_field" data-priority="">
<label for="billing_first_name" class="screen-reader-text"><abbr class="required" title="required">
</label>
<span class="woocommerce-input-wrapper">
<input type="text" class="input-text" name="billing_first_name" id="billing_first_name" placeholder="First name" value="" autocomplete="given-name">
</span>
</p>
<!-- not my HTML - fix yours --->
I have a .button:hover thing in my css code, but I want that code to be canceled for five seconds when my button is pressed? My code is below.
function myFunction(){
var text = document.getElementById('input').value;
var textArray = text.split(" ").sort();
var output= document.getElementById('output');
output.value = textArray.toString().replace(/,/g," ");
}
function maFunction() {
var copyText = document.getElementById("output");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
}
/*function ok() {
document.getElementById("copied").innerHTML = "Hello World";
}
*/
/*function fadeOut(){
location.href='index.html#open-modal';
setTimeout(function () {
location.href='index.html#modal-close';
}, 1000);
}*/
body {
margin-top: 10px;
margin-left: 20px;
display: flex;
}
.form {
margin-right: 20px;
background: #ffffff;
position: relative;
}
.input {
height: 700px;
width: 600px;
margin-top: 15px;
outline: none;
font-size: 26px;
resize: none;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
outline: none;
border-radius: 10px;
margin-top: 0px;
padding-top: 5px;
padding-left: 10px;
}
.otput {
height: 695px;
width: 620px;
outline: none;
resize: none;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
border-radius: 10px;
outline: none;
margin-left: 10px;
}
.output {
height: 650px;
width: 512px;
outline: none;
font-size: 26px;
resize: none;
outline: none;
border: none;
padding: 0px;
margin-top: 5px;
margin-left: 10px;
}
.button {
background: #4CAF50;
border: none;
outline: none;
color: #ffffff;
padding: 14px;
width: 100px;
border-radius: 0 10px;
/*margin-left: 1134px;*/
font-size: 22px;
cursor: pointer;
position: absolute;
}
.speech-bubble {
height: 20px;
width: 150px;
color: white;
font-size: 20px;
text-align: left;
position: relative;
background: #4CAF50;
border-radius: 1px;
padding: 10px 10px 10px 5px;
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: none;
margin-top: 35px;
margin-left: 630px;
}
.speech-bubble:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 9px solid transparent;
border-right-color: #4CAF50;
border-left: 0;
margin-top: -9px;
margin-left: -9px;
}
.button:hover + .speech-bubble {
transform: translateY(-690px);
display: block;
}
.button:hover + .speech-bubble:after {
display: block;
}
::selection {
color: black;
background: lightblue;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar:hover {
width: 20px;
}
::-webkit-scrollbar-thumb {
background: #888;
}
/*.modal-window {
position: fixed;
background-color: rgba(200, 200, 200, 0.75);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal-window:target {
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 170px;
height: 50px;
padding: 10px;
position: relative;
margin: 10% auto;
/*padding: 2rem;*/
/*background: #fff;
color: #333;
}
.modal-window .copy{
font-size: 20px;
}*/
<html>
<head>
<title>alphabetical order machine</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<textarea class="input" id="input" type="text" placeholder="type your text here" onchange="myFunction()" onkeyup="myFunction()"></textarea>
<form class="otput">
<textarea class="output" id="output" type="output" placeholder="your alphabetized text will appear here"></textarea>
<input class="button" type='button' value="copy" onclick="maFunction()">
<p class="speech-bubble">click to copy text</p>
<!--p id="copied" class="copied"></p-->
</form>
<script src="index.js"></script>
</body>
</html>
You can add a class on click and use it to set display:none for the speech buble .
possible example
function myFunction(){
var text = document.getElementById('input').value;
var textArray = text.split(" ").sort();
var output= document.getElementById('output');
output.value = textArray.toString().replace(/,/g," ");
}
function maFunction(el) { //update : el
el.classList.add('clicked');// update
var copyText = document.getElementById("output");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
setTimeout( () => el.classList.remove('clicked'),5000);//Oups, needed : update to recover hover behavior after 5s
}
/*function ok() {
document.getElementById("copied").innerHTML = "Hello World";
}
*/
/*function fadeOut(){
location.href='index.html#open-modal';
setTimeout(function () {
location.href='index.html#modal-close';
}, 1000);
}*/
body {
margin-top: 10px;
margin-left: 20px;
display: flex;
}
.form {
margin-right: 20px;
background: #ffffff;
position: relative;
}
.input {
height: 700px;
width: 600px;
margin-top: 15px;
outline: none;
font-size: 26px;
resize: none;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
outline: none;
border-radius: 10px;
margin-top: 0px;
padding-top: 5px;
padding-left: 10px;
}
.otput {
height: 695px;
width: 620px;
outline: none;
resize: none;
border-style: solid;
border-color: #4CAF50;
border-width: 2px;
border-radius: 10px;
outline: none;
margin-left: 10px;
}
.output {
height: 650px;
width: 512px;
outline: none;
font-size: 26px;
resize: none;
outline: none;
border: none;
padding: 0px;
margin-top: 5px;
margin-left: 10px;
}
.button {
background: #4CAF50;
border: none;
outline: none;
color: #ffffff;
padding: 14px;
width: 100px;
border-radius: 0 10px;
/*margin-left: 1134px;*/
font-size: 22px;
cursor: pointer;
position: absolute;
}
.speech-bubble {
height: 20px;
width: 150px;
color: white;
font-size: 20px;
text-align: left;
position: relative;
background: #4CAF50;
border-radius: 1px;
padding: 10px 10px 10px 5px;
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: none;
margin-top: 35px;
margin-left: 630px;
}
.speech-bubble:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 9px solid transparent;
border-right-color: #4CAF50;
border-left: 0;
margin-top: -9px;
margin-left: -9px;
}
.button:hover + .speech-bubble {
transform: translateY(-690px);
display: block;
}
.button:hover + .speech-bubble:after {
display: block;
}
.button.clicked + .speech-bubble {display:none}/* UPDATE HERE */
::selection {
color: black;
background: lightblue;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar:hover {
width: 20px;
}
::-webkit-scrollbar-thumb {
background: #888;
}
/*.modal-window {
position: fixed;
background-color: rgba(200, 200, 200, 0.75);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.modal-window:target {
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 170px;
height: 50px;
padding: 10px;
position: relative;
margin: 10% auto;
/*padding: 2rem;*/
/*background: #fff;
color: #333;
}
.modal-window .copy{
font-size: 20px;
}*/
<textarea class="input" id="input" type="text" placeholder="type your text here" onchange="myFunction()" onkeyup="myFunction()"></textarea>
<form class="otput">
<textarea class="output" id="output" type="output" placeholder="your alphabetized text will appear here"></textarea>
<input class="button" type='button' value="copy" onclick="maFunction(this)"><!-- update on onclick -->
<p class="speech-bubble">click to copy text</p>
<!--p id="copied" class="copied"></p-->
</form>
Create a new class called .clicked, which contains the styling you want to see when the button is clicked. Then add the class to the button for 5 seconds.
function clicked (button) {
button.classList.add('clicked');
setTimeout(
() => button.classList.remove('clicked'),
5000);
}
button:hover.clicked {
background-color: red;
}
button:hover.clicked + .speech-bubble {
color: blue;
background-color: #aaa;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="m-4">
<button class="btn btn-primary" onclick="clicked(this);">Sample Button</button>
<p class="speech-bubble">click to copy text</p>
</div>