I know this is just a simple question for you but here I'm having a hard time trying to solve my own problem.
In my case, I have several text field that changes color of the field's border and label's text when the field itself is focused, and will revert changes when it is not focused. So then I used the following code: (see my demo)
$(function() {
$(".field").focus(function() { /* ... */ });
$(".field").blur(function() { /* ... */ });
});
But since I'm pointing to the class .field, all elements that have this class will be affected so I thought I have to set the current active element with the class .field so the other elements will be excluded. I used the below code but it doesn't work (and I don't even know if I'm right about the idea):
var current = $(document.activeElement).hasClass(".field");
$(current).focus(function() { /* ... */ });
$(current).blur(function() { /* ... */ });
If there's another way to settle this please tell me how.
Hope you could help me.
Thanks.
You can update your $(".field") selector to $(this) to select the field and $(this).next() to select the field's label inside both your blur and focus functions. Only the selected field and the next label will be selected, see this snippet:
$(function() {
$(".field").focus(function() {
/* when field with or without value is focused, add these classes */
if ($(this).val().length || $(".field").val().length == "") {
$(this).addClass("field-is-focused");
$(this).next().addClass("label-is-focused");
}
});
$(".field").blur(function() {
/* when field with or without value is not focused, remove added classes */
if ($(this).val().length || $(".field").val().length == "") {
$(this).removeClass("field-is-focused");
$(this).next().removeClass("label-is-focused");
}
});
});
fieldset {
border: 2px solid #ccc;
padding-top: 20px;
padding-bottom: 20px;
}
.label {
float: left;
margin-right: 5px;
}
.field {
border: 2px solid #ccc;
padding: 0 5px;
height: 22px;
margin-bottom: 10px;
}
.field:focus {
outline: 0;
outline-offset: 0;
}
/*---------------------------------*/
.field-is-focused {
border-color: blue;
}
.label-is-focused {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"/>
<title>jQuery - Get current focused element</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<form>
<fieldset>
<!-- input email type field -->
<input type="email" class="field">
<label class="label">Email</label>
<!-- input password type field -->
<input type="password" class="field">
<label class="label">Password</label>
<!-- textarea field -->
<textarea class="field"></textarea>
<label class="label">Comment</label>
</fieldset>
</form>
</body>
</html>
Try using the focus CSS propert for the class .field.
.field :focus{
/*your style change*/
}
This might eliminate the focus/blur event functions.Hope this helps!
Related
// Desktop View
const content1 = document.querySelector('#tab-1');
content1.addEventListener('click', (e) => {
document.querySelector('.dropdown-1').classList.toggle('hide');
document.querySelector('.dropdown-2').classList.remove('hide');
document.querySelector('.dropdown-3').classList.remove('hide');
document.querySelector('.fitguide').classList.toggle('darkBG');
document.querySelector('.fitguide a').classList.toggle('lightText');
});
The above is my JavaScript for this section I am having issues with. When I select a tab, the background and text colors change, as they are supposed to, but when I select another tab, the previously selected tab does not deselect and change back to normal. I am talking about the last two toggle lines of code here. My CSS for them :
.darkBG {
background: black;
}
.lightText {
color: white;
}
I have tried a lot of things to try and fix this, but I just keep getting no text, only background change. I want to do it with JavaScript but can do it in the CSS if necessary. Does anybody have fresh eyes, experience with this issue?
We are missing the HTML part. However, we can play with this. I think it's somethin like this that you would like.
const content1 = document.querySelector('#tab-1');
content1.addEventListener('click', (event) => {
let targetElement = event.target;
for (let element of content1.children) {
if (element === targetElement) {
element.classList.remove("deselected");
element.classList.add("selected");
continue;
}
element.classList.add("deselected")
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST STACKOVERFLOW</title>
<style>
.darkBG {
background: black;
}
.lightText {
color: white;
}
.dropdown-1{
border: 1px solid black;
}
.dropdown-2{
border: 1px solid black;
}
.dropdown-3{
border: 1px solid black;
}
.selected{
background-color: aquamarine;
}
.deselected{
background-color: black;
}
#tab-1 div{
width: 50px;
height: 50px;
margin: 5px;
}
</style>
</head>
<body>
<div id="tab-1">
<div id="1" class="dropdown-1"></div>
<div id="2" class="dropdown-2"></div>
<div id="3" class="dropdown-3"></div>
</div>
<script src="./stackoverflow.js"></script>
</body>
</html>
Click on any of the squares that you will notice that the css will be applied to the element that you clicked.
Be aware in the targetElement that is the clicked element. There are many solutions for this case, but it's a begin
It's been some years since I have had to do DOM manipulation with CSS and vanilla JavaScript.
I have an input element some default css that is being added to its wrapping div and not the input element itself like so:
<div class="field animated-label text required">
<label class="control-label" for="answer">Answer</label>
<input class="form-control" />
</div>
So the default css for this input element is dictated by this selector:
.rds-form .animated-label {
border: 2px solid #ccc;
border-radius: 2px;
color: #767676
display: block;
min-height: 40px;
position: relative;
}
However when the user clicks out of the input element not having typed anything in, this selector gets appended on to give a red error border around the input element:
.rds-form .field-group.error, .rds-form
.field.text.error, .rds-form
.field.select.error, .rds-form .field.textarea.error {
border: 2px solid #cc2233;
position: relative;
}
How would this be handled in JavaScript? I am assuming this is handled by some JavaScript logic.
Add two handlers to the <input> field:
// When the input field has focus, remove the 'error' class from .animated-label:
document.querySelector('input').addEventListener('focus', function(e) {
document.querySelector('.animated-label').classList.remove('error');
});
// When the input field loses focus, determine whether to add or remove the 'error' class:
document.querySelector('input').addEventListener('blur', function(e) {
if (e.target.value.match(/^\s*$/)) { // Input is empty
document.querySelector('.animated-label').classList.add('error');
} else {
document.querySelector('.animated-label').classList.remove('error');
}
});
Trying to figure out how to keep the DIV from fading when you click on it. I just want the DIV to fade after you click off anywhere else on the screen, everywhere but the actual "testdiv" and the input field. Skills aren't that strong with javascript, so any help would be appreciated. Thanks.
$(document).ready(function(){
$('.showdiv').focus(function(){
$('.testdiv').fadeIn(1000);
}).focusout(function(){
$('.testdiv').fadeOut(1000);
});
});
body {
padding: 50px
}
.showdiv {
width: 100%;
height: 30px;
padding:10px}
.testdiv{
display:none;
margin-top:0;
width:auto;
background-color: #efefef;
padding: 20px;
font: 12px Arial, san serif;}
*:focus{
outline:none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" class="showdiv" Placeholder="Search by Keyword"/>
<div class="testdiv">
<input type="checkbox"> Search only open source materials
</div>
Here is a JSFiddle example.
I'm not in love with this because it could be confusing to the user, but it works. It doesn't work if you tab to the checkbox.
$('.showdiv').focus(function() {
$('.testdiv').fadeIn(1000);
}).focusout(function() {
$('.testdiv').fadeOut(1000);
});
$('.testdiv input').change(function() {
$('.testdiv').stop(); // end animation on the faded element
$('.showdiv').focus(); // return focus to reinstate the focusout handler
});
Demo
Im working on a 'what you see is what you get' application. You code in one box and the output is displayed in another. I need to check if a user has typed specific text within an HTML textarea, and if it's correct is will make a button visible.
So far, when the user types text-align:center; the button is made visible. I can't work out so the user HAS to type 2 sets of text.
So far i have this:
$(document).ready(function(){$(".textArea").keyup(function() { // directed at the textArea div tag
if ($(this).val().indexOf('text-decoration:underline;' && 'text-align:center;') != -1) { // if the text matches those 2 strings
$(".continue").css("visibility", "visible"); // make button visible
}
else {
$(".continue").css("visibility", "hidden"); // keep it hidden if strings haven't been produced
$(".correct").css("display", "block");
}
});
});
.continue{
background-color: #ef6d3b;
width: 6em;
text-align: center;
font-size: 15px;
border: none;
height: 25px;
color: #000000;
outline: none;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
position: relative;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="codeArea">
<div class="correct">
<textarea class="textArea">
<html>
<body>
</body>
</html>
</textarea>
</div>
</div>
<button class="continue" type="button">Continue</button>
You are using wrong expression for your if statement..
if ($(this).val().indexOf('text-decoration:underline;' &&
'text-align:center;') != -1)
which is evaluated same as
$(this).val().indexOf('text-align:center;') != -1
what you should really do is
$(this).val().indexOf('text-decoration:underline;')!=-1 &&
$(this).val().indexOf('text-align:center;')!=-1
I've created a search bar when, a user hover overs a button a textbox will appear. What i want to do is keep the text box to stay visible once the user has pressed the text box. So if the user accidentally removes the mouse over the text box or button whilst typing the text box remains in the same place.
Here's my code:
$('#search-button, #search-text').hover(function searchbox () {
$('#search-text').addClass("fixed-textbox");
},function () {
$('#search-text').removeClass("fixed-textbox");
});
#search-text {
left:300px;
position:relative;
}
.search:hover #search-text {
left:0;
position:relative;
}
.search {
background: gray;
display: inline-block;
padding: 10px;
overflow:hidden
}
<div class="search">
<input id="search-text" type="text" placeholder="type here" />
<button id="search-button">SEARCH</button>
</div>
I've done it this way to add transition effects on to the search-text. I was thinking of adding a class on the textbox using javascript, but unsure if this way would work. Also i notice the text box changes position if you type in it with out hovering over the section.
Try adding this new CSS style to keep the box visible when it has focus:
#search-text:focus {
left: 0px;
}
Functional example:
#search-text {
left:300px;
position:relative;
}
#search-text:focus {
left: 0px;
}
.search:hover #search-text {
left:0;
position:relative;
}
.search {
background: gray;
display: inline-block;
padding: 10px;
overflow:hidden
}
<div class="search">
<input id="search-text" type="text" placeholder="type here" />
<button id="search-button">SEARCH</button>
</div>
Just add a check to see if the textbox has focus:
$('#search-button, #search-text').hover(function searchbox () {
$('#search-text').addClass("fixed-textbox");
},function () {
if(!$("#search-text").is(":focus")){
$('#search-text').removeClass("fixed-textbox");
}
});
//hide if focus out
$("#search-text").on("focusout", function(){
//Only if textbox does not have a value
if($("#search-text").val() == null || $("#search-text").val() == ""){
$('#search-text').removeClass("fixed-textbox");
}
});
I think this should do roughly what you are looking for. I decided to use the blur event, rather than the hover event, meaning that the textbox won't disappear until the user clicks elsewhere and they don't have to click on it to start typing.
There's also an animation for the input.
var VISIBLE_CLASS = 'fixed-textbox';
$(function() {
var $text = $('#search-text'),
$button = $('#search-button');
function toggle(bool) {
return function() {
if(bool) {
$text.addClass(VISIBLE_CLASS);
$text.focus();
} else {
$text.removeClass(VISIBLE_CLASS);
}
}
}
$button.on('click', toggle(true));
$button.on('hover', toggle(true));
$text.on('blur', toggle(false));
});
#search-button {
/* show above during animation */
z-index:10;
position:relative;
}
#search-text {
left:300px;
position:relative;
-webkit-transition-duration:0.3s;
}
#search-text.fixed-textbox {
left:0px;
-webkit-transition-duration:0.3s;
}
.search {
background: gray;
display: inline-block;
padding: 10px;
overflow:hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<input id="search-text" type="text" placeholder="type here"/>
<button id="search-button">SEARCH</button>
</div>