I have a series of text boxes on a page with a custom touch keyboard. The problem is when one clicks the tab on the custom keyboard and goes to the next text box, the text box's gradient does not remove (my class's removeClass('selected') does not function as usual). Even though the cursor moves on. I tried onfocus="myFunction()", css input:focus selector, and js .focus() / .focusout().
HTML
<div class="container">
<div class="control">
<fieldset class="control-input input-name-noread gradient open-keyboard">
<label>Name</label>
<input type="text" class="from" id="preference-name" autocomplete="off" value="George">
</fieldset>
</div>
<div class="control">
<fieldset class="control-input input-name-noread gradient open-keyboard">
<label>Name</label>
<input type="text" class="from" id="preference-name" autocomplete="off" value="George">
</fieldset>
</div><div class="control">
<fieldset class="control-input input-name-noread gradient open-keyboard">
<label>Name</label>
<input type="text" class="from" id="preference-name" autocomplete="off" value="George">
</fieldset>
</div></div>
JQuery
$(".keyboard-key-return").click(function() {
$(".control-input").addClass('gradient');
});
$(".open-keyboard").click(function() {
$(".keyboard").show();
});
$(".open-keyboard-readonly").click(function() {
$(".keyboard").hide();
});
$(".keyboard-close").click(function() {
$(".control-input").addClass('gradient');
});
$(".control-input").click(function() {
$(this).removeClass('gradient');
});
$(".keyboard-close").click(function(){
$(".from").blur();
})
$(".keyboard-key-return").click(function(){
$(".from").blur();
})
$(".control-input").focusout(function(){
$(".from").css({
"background-image": "-webkit-linear-gradient(top, rgb(239, 239, 239), rgb(220, 220, 220))"
});
});
$(".control-input").focusout(function(){
$(this).addClass('gradient');
});
css
.from {
width: 443px;
background-color: transparent;
border: none;
height: 68px;;
outline: none;
font-size: 28px;
margin: 5px 0px 0px 0px;
input:focus{
background-image: none;
}
}
Is there an alternative to these methods to detect where the cursor is or a way to detect the focus event so I can remove the class on tab?
This might be not the cleanest solution, but it is working as expected:
JQuery
$('.gradient').on('click', function(){
$('.gradient').removeClass('selected');
$(this).addClass('selected');
});
$('.gradient').on('keyup', function(e){
$('.gradient').removeClass('selected');
if (e.which == 9) { // is TAB key
$(this).parent().find('.gradient').trigger('click'); // searching for the next element
}
});
CSS
.gradient {
background-image: -webkit-linear-gradient(top, rgb(239, 239, 239), rgb(220, 220, 220));
}
.gradient.selected {
background-image: none;
}
Normally you need to prevent default for TAB key, see:
jQuery: keyup for TAB-key?
Solution
$(".keyboard-key-tab").click(function() {
$(".from").parent().find(document.activeElement).trigger('click');
});
.keyboard-key-tab is the button on the keyboard. When the keyboard opens it's within it's on js class and is no longer able to detect .click() or .focus() on this page unless you force it. .from is the input class on the text box, the code returns to it's parent and searches for the active child (the next text box). The code then forces a click which is handled by the code I already had in place to remove/add classes (in this case gradients).
Related
Safari is not recognising focusin events on file input types. I could listen for a click or value change event but I need this to fire on keyboard-only interaction, somebody tabbing through the form.
I haven't tested this in other browsers besides Safari and Chrome. Is this a know bug? I've seen a lot of issues surrounding Safari input events in general..
const form = document.getElementById("form");
form.addEventListener("focusin", event => {
$("h2").toggleClass("red");
});
input {
padding: 10px;
border: 3px solid salmon;
width: 200px;
margin: 5px;
}
.red {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="form">
<input type="file"><br>
<input type="text" placeholder="..this is a text field">
<h2 class="msg">
I toggle between red and black when you focusin...<br>
> CHROME: the text input AND the file input<br>
> SAFARI: only the text input<br>
</h2>
</form>
Not sure if same result with focusout..
I have a html form with multiple questions that user need to answer, I want to add some style as : when the user clicks a question I want it to be focused and blur the other questions, how should I approach this.
Here is the form I made,but I wan to change the opacity of the div when clicked on the input field please suggest how to approach this.
$(document).on('focus active', 'input, textarea', function(){
$('label[for='+$(this).attr('id')+']').addClass('active');
});
$(document).on('blur', 'input, textarea',function(){
$('label[for='+$(this).attr('id')+']').removeClass('active');
});
input[type=text], input[type="email"],input[type="number"] {
width: 50%;
display: block;
padding: 5px 5px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid #ccc;
}
input:focus {
outline: none;
}
div {
opacity: 0.5;
}
.active{
font-size: 50px;
color: darkgray;
opacity: 1 px !important;
}
<!doctype html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
</head>
<div>
<label for="contact_form_name"><span class="qno">1.</span> What is your name?*</label>
<input id="contact_form_name" name="contact_form_mail" type="text">
</div>
<div>
<label for="contact_form_phone"><span class="qno">2.</span>What is your contact number?*</label>
<input id="contact_form_phone" name="contact_form_phone" type="number">
</div>
<div>
<label for="contact_form_email"><span class="qno">3.</span>What is your email address?**</label>
<input id="contact_form_email" name="contact_form_email" type="email">
</div>
<div>
<label for="contact_form_city"><span class="qno">4.</span>Which city do you live in?*</label>
<input id="contact_form_city" name="contact_form_city" type="text">
</div>
</body>
You should have dedicated Id for each div(each question will be inside a div i suppose). Later use focus and blur events of javascript based on id
document.getElementById("your_id").blur();
document.getElementById("your_id").focus();
You can also populate an array containing id of those questions and iterate a loop to focus and blur
Hi I would use JQuery to to add a class eg.focused on to the question the user is on, and all the other ones you would add another class eg.non-focused.
JQuery to add class to selected div
$(this).addClass('focused');
now in then add all the other div you add class non-focused
$('class_name_of_all_div').addClass('focused');
so you would have and html layout similar to this
<div class="question">
<input type="text" name="name" >Name</input>
</div>
<div class="question">
<input type="text" name="name" >Name</input>
</div
<div class="question">
<input type="text" name="name" >Name</input>
</div
so your function would look like this
$(".question").click(function() {
$(this).addClass('focused');
$('.question').addClass('focused');
});
now you add the styling for it
.non-focused {
filter: blur(2px);
}
and for focused
.non-focused {
filter: blur(0px) !important;
}
and you should be set.
let me know if you have any problems.
This issue exists only in google chrome. If I have a checkbox with label inside a container which is having some focus styles. When I click on the label, I'm preventing moving the focus to container using e.preventDefault() but this is introducing one more issue. If we double click anywhere on the document OR select any text by mouse drag, then clicking on the label doesn't select the checkbox. But clicking on the checkbox directly does work fine.
If I clear the text using window.getSelection().removeAllRanges() it's working but doesn't allow the user to select the text of the label anymore.
Is this a bug with the chrome browser. I dont see any in the chromium bug forum.
Please check the code below..
document.getElementById('chkLabel1').onmousedown = function(e) {
e.preventDefault();
};
.container {
height: 300px;
width: 300px;
border: 3px solid black;
padding: 20px;
}
.container:focus {
border-color: red;
}
#chkLabel1:focus {
border: 1px solid red;
}
<div class="container" tabindex="0">
<input type="checkbox" id="chk1" />
<label id='chkLabel1' for="chk1"> with preventDefault </label>
<br/>
<input type="checkbox" id="chk2" />
<label for="chk2"> without preventDefault </label>
</div>
Here is the fiddle link
https://jsfiddle.net/zgz2j8ad/
A better solution would seem to be this:
document.getElementById('chkLabel1').onfocus = function(e) {
e.preventDefault();
};
This will only stop it being focused.
I have a form with an input with the attribute required set. When i submit the form and the input is empty, it shows a red border around it.
I am now looking for a javascript method to remove this, and reset the display of the input to the initial state.
After resetting and submitting again, the input should be checked again and show a red border if empty. Therefore i think setting css with :required does not give the desired solution.
A quick fiddle to illustrate my question:
jQuery(function() {
jQuery('#reset').click(function() {
//Clear red border of input
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<input id="myinput" required>
<input type="submit" value="submit">
</form>
<button id="reset">reset</button>
After clicking reset, the form should be shown as when the page is just loaded.
Edit
I tested this in firefox. In chrome the style automatically is removed when the element is onfocussed. However, i am still looking for a js solution to remove the message.
Edit, Updated
I want to reset the style, not prevent it from happening (when i dont
focus on it).
You can add a className to #myinput element which sets box-shadow to none and border to inherit at click on #reset element. Remove className at focus or change event on #myinput element, depedning on whether you want the box-shadow and border removed at focus on invalid input, or when user inputs a value.
.reset:-moz-ui-invalid:not(output) {
box-shadow: none;
border: 1px solid inherit;
}
When submitted, it shows a message like "This field is required". This
is removed when i unfocuss, but i am looking for a js method to remove
that message.
You can use invalid event, .setCustomValidity(" ") with a space character as parameter, called on event.target within handler.
You can use css :focus, :invalid to set border to red only when input gains focus and input is invalid. At html can add pattern attribute with RegExp \w+ to set input to invalid if value of input is empty string or only space characters
jQuery(document).ready(function() {
jQuery("#reset").click(function() {
jQuery("#myinput").addClass("reset")
});
jQuery("#myinput").focus(function() {
jQuery(this).removeClass("reset")
})
.on("invalid", function(e) {
e.target.setCustomValidity(" ");
})
})
#myinput:focus:invalid {
border: 1px solid red;
}
#myinput:focus {
outline: none;
}
.reset:-moz-ui-invalid:not(output) {
box-shadow: none;
border: 1px solid inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<input id="myinput" pattern="\w+" type="text" value="" required/>
<input type="submit" value="submit" />
</form>
<button id="reset">reset</button>
I cannot reproduce it here. But probably your problem is the pseudo-class applied to the input.
Given that you cannot remove pseudo-classes, maybe you can override the style. Something like:
:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow:none;
}
If you just need to apply the style when the reset button is clicked, add the styles to your own class and add/remove the class when needed.
The initial keyword makes a CSS property take the browser's default style, if this is what you're looking for...
jQuery(function() {
jQuery('#reset').click(function() {
//Clear red border of input
jQuery('#myinput').css('border-color', 'initial');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
#myinput {
border-color: red;
}
</style>
<form id="myform">
<input id="myinput" required>
<input type="submit" value="submit">
</form>
<button id="reset">reset</button>
Google custom search engine prints the search form with the following tags:
<gcse:search></gcse:search>
Once printed, the text input of the search form is:
<input id="gsc-i-id1" class="gsc-input" type="text" lang="es" autocomplete="off" size="10" name="search" title="buscar" style="width: 100%; padding: 0px; border: medium none; margin: 0px; height: auto; outline: medium none; background: rgb(255, 255, 255) url("https://www.google.com/cse/static/es/google_custom_search_watermark.gif") no-repeat scroll left center;" x-webkit-speech="" x-webkit-grammar="builtin:search" dir="ltr" spellcheck="false">
I am trying to create an event for when the text input gains focus or it is clicked on, like this:
$( "#gsc-i-id1" ).click(function() {
alert( "test" );
});
But it is not working. I am running out of ideas. Is jQuery not working because of the fact that we are are dealing with component tags? How can I accomplish what I am trying to do?
You need to delegate that event to some ancestor or body like this:
$("body").on('click focus','#gsc-i-id1',function() {
alert( "test" );
});