I have a several input fields that look like this
<div class='kary rounded5' id='boarVariables'>
<span class='bld'>BOAR variables</span><br>
<div class='klbl'>Number of Boars Tested</div>
<input type='text' id='k_nobt'><br>
<div class='klbl'>AVG sperm/boar/week (lifetime)</div>
<input type='text' id='k_asbw'><br>
<div class='klbl'>Sperm per dose (bil)</div>
<input type='text' id='k_spdb'><br>
<div class='klbl'>Utilization rate</div>
<input type='text' id='k_ur'>%<br>
<div class='klbl'>Boar productive lifetime (months)</div>
<input type='text' id='k_bplm'><br>
<hr>
<div class='klbl'>Doses possible/week:</div>
<div class='kanswer' id='k_dpw'></div><br>
<div class='klbl'>Doses actual/week:</div>
<div class='kanswer' id='k_daw'></div><br>
<div class='klbl'>Usable doses/lifetime:</div>
<div class='kanswer' id='k_udl'></div><br>
<div class='klbl'>Sows served/lifetime:</div>
<div class='kanswer' id='k_ssl'></div><br>
</div>
I have enter working like tab, and when they press enter it moves to the next input field, and calls a function that does calculations on the input.
$('#boarVariables input').keypress(function(e) {
if (e.which == 13) {
$(this).nextAll('input').first().focus();
e.preventDefault();
}
});
$('#boarVariables input').blur(function(){
calcBoarVars();
});
When I get to the last input field, I can't figure out how to move back to the first field, which would trigger the calculation correctly via blur.
I've tried variations of this (inside of capturing enter) but no luck
$('#boarVariables input:last-child').each(function(){
var $this = $(this);
$('#boarVariables input:first').focus();
});
$('#boarVariables input').keypress(function(e) {
if (e.which == 13) {
if(!!$(this).nextAll('input').first().length){
$(this).nextAll('input').first().focus();
}
else{
//I can't figure out how to move back to the first field : this is how
$('#boarVariables input:first').focus();
}
e.preventDefault();
}
});
// which would trigger the calculation correctly via blur : it does.
$('#boarVariables input').blur(function(){alert("ok");})
DEMO : http://jsfiddle.net/ZURze/
Forget about the enter key, just attach the onblur event (or onchange) and use tab key to navigate them... Should work.
You can search tabindex on google and find more info on how to tune it, and select your tab navigation order, (even you could fire focus on the first when onblur on the last to skip the other element).
Related
I am making a text editor with <div contenteditable>. I want to prompt a confirmation message before the user deleting image element inside the editor. So when the user press backspace, before deleting the image element, there should be a prompt "Are you sure you want to delete the image?".
How can I do this?
Event listener keydown can be added to that <div contenteditable> element. Keydown and keypress events takes place before the content is changed and event.preventDefault() can be used to stop the content before editing.
window.onload = function(){
document.getElementById("elem").addEventListener('keydown',function(event){
if( event.key=='Backspace' ){
//your condition check can be given here
if( confirm('are you sure you want to delete') ){
return;
}else{
event.preventDefault();
}
}
});
}
.edit-elem{
background-color: red;
}
<div contenteditable="true" class="edit-elem" id="elem"></div>
Is this what you want?
$(document).ready(function(){
$('.remove').click(function(e){
e.preventDefault();
alert('Are You Sure?');
});
$(document).on('keyup','div', function(e){
console.log(e.keyCode);
if(e.keyCode == '8'){
alert('You have pressed backspace');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable>
<input type="file" class="image" name="image"/>
<button type="button" class="remove">Remove</button>
</div>
I have written a code such that I should see the preview area change colour when I type names into the input box. I need to call the setPreviewColour in the event handler and pass the current value of the input box into it.
Below is my code:
function setPreviewColor(item){
$('.preview').css('background-color', item);
}
$(document).on('keyup', '#add-to-favorite', function() {
setPreviewColor($('#color').val());
// $('#items').append('<li>' + $('#color').val() + '</li>');
// $('.preview').css('background-color', $('#color').val());
} );
HTML code
<div id="container">
<h1>Color picker</h1>
<input id="color" type="text"/>
<button id="add-to-favorite">Add to favorites</button>
<div class="row">
<div class="column">
<div class="preview">
</div>
</div>
<div class="column">
<div id="colors">
</div>
</div>
<br/>
<div class="color-code"></div>
</div>
</div>
Screenshot of broswer
It doesn't change when i click on the Add to favourites button. It only changes when I press CTRL+ SHIFT +J to go to the console. Thanks for the help
You are trying to use onkeyup on a button with id (add-to-favorite), you need to attach the onkeyup event to your textbox:
//Change what you have to the following, now as a user types in the textbox
//with id of color, it will send the value of the textbox to setPreviewColor()
$(document).on('keyup', '#color', function() {
setPreviewColor($('#color').val());
//OR
//setPreviewColor($(this).val());
} );
Change
$(document).on('keyup', '#add-to-favorite', function() {
to
$('#add-to-favorite').on('click', function() {
I'm working on a project where a button needs to be disabled until a hyperlink is clicked and a checkbox is checked. I currently have the checkbox part down using jQuery:
$('#tc-checkbox').change(function(){
if($(this).is(":checked")) {
$('#tc-btn').removeClass('tc-disable');
} else {
$('#tc-btn').addClass('tc-disable');
}
});
But I also need to set it up so the class of tc-disable is still on the button until an anchor tag is clicked as well. I've never really done this before where a link needs to be clicked before removing a class and couldn't find what I was looking for as I was Googling for an answer.
Hope the code below helps. I also added console out put so you can track the value. Another option is use custom attribute on link element instead of javascript variable to track if the link is clicked.
var enableLinkClicked = false;
$('#tc-link').click(function() {
enableLinkClicked = true;
console.log("link clicked\ncheckbox value: " + $($('#tc-checkbox')).is(":checked"));
console.log("link clicked: " + enableLinkClicked);
if ($('#tc-checkbox').is(":checked")) {
$('#tc-btn').removeClass('tc-disable');
}
});
$('#tc-checkbox').change(function() {
console.log("checkbox clicked\ncheckbox value: " + $(this).is(":checked"));
console.log("link clicked: " + enableLinkClicked);
if ($(this).is(":checked") && enableLinkClicked) {
$('#tc-btn').removeClass('tc-disable');
} else {
$('#tc-btn').addClass('tc-disable');
}
});
#tc-btn.tc-disable {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="tc-btn">My Button</button>
<br/>
<a id="tc-link" href="javascript:void(0);">Link to enable button</a>
<br/>
<input type="checkbox" id="tc-checkbox" />
If the page is refreshing or taking you to a different page when you click the hyperlink, you will want to look into sessionStorage. When the hyperlink is clicked you will want to set a sessionStorage variable and when the page loads you want to check that variable to see if it is populated. If the variable is populated, enable the button.
Set the variable.
sessionStorage.setItem('key', 'value');
Get the variable
var data = sessionStorage.getItem('key');
If you need to re-disable the button you can clear the session storage and reapply the disabled class.
sessionStorage.clear();
You can learn more about session storage here.
If the page does not refresh you could just set an attr on the link when it is clicked like so.
$('#tc-link').on('click', function() {
$(this).attr('clicked', 'true');
});
Then when the checkbox is checked you can check this in your function.
$('#tc-checkbox').change(function(){
if($(this).is(":checked") && $('#tc-link').hasAttr('clicked')) {
$('#tc-btn').removeClass('tc-disable');
} else {
$('#tc-btn').addClass('tc-disable');
}
});
These are just some solutions I could think of off the top of my head. Hope this helps.
Maybe this is better for you. First you make an .on('click' event listener on the anchor element, then, if the checkbox is checked enable the button. I added the else statement to disable the button if a user clicks the link and the checkbox is not set for an example. In this example you don't need the classes.
But if you needed to keep the the classes then you would replace the $('#tc-btn').prop('disabled', false); with $('#tc-btn').addClass() or .removeClass()
$( '#theLink' ).on( 'click', function(e)
{
e.preventDefault();
if($('#tc-checkbox').is(':checked'))
{
$('#tc-btn').prop('disabled', false);
$('#tc-btn').val('Currently enabled');
}
else
{
$('#tc-btn').val('Currently disabled');
$('#tc-btn').prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="tc-checkbox" />
This link will enable the button
<input type="button" id="tc-btn" value="Currently disabled" disabled="disabled"/>
Here a much more simple solution and it handles the state of the button if they uncheck the "I Accept" checkbox. It is pretty easy to implement. I just used Bootstrap to pretty up the example.
//Handles the anchor click
$("#anchor").click(() => {
$("#anchor").addClass("visited");
$("#acceptBtn").prop("disabled", buttonState());
});
//Handles the checkbox check
$("#checkBx").on("change", () => {
$("#acceptBtn").prop("disabled", buttonState());
});
//Function that checks the state and decides if the button should be enabled.
buttonState = () => {
let anchorClicked = $("#anchor").hasClass("visited");
let checkboxChecked = $("#checkBx").prop("checked") === true;
return !(anchorClicked && checkboxChecked);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
View Terms
</div>
</div>
<div class="row">
<div class="col-md-12">
<label class="form-check-label">
<input class="form-check-input" id="checkBx" type="checkbox" value="">
I accept the terms
</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button id="acceptBtn" class="btn btn-success" disabled="disabled">
Ok
</button>
</div>
</div>
</div>
A one-liner solution using Javascript could be:
<input type="submit" id="test" name="test" required disabled="disabled">
<label for="test">I clicked the <a target="_blank" href="https://stackoverflow.com" onclick="document.getElementById('test').disabled=false">link</a>.</label>
Change the type "submit" to "button" or "checkbox" accordingly to your needs.
I'm have a function which shows a div when the user types something but it interferes with a page where I have an input. I would like to disable the script when the part of the page with the div that holds the inputs is visible so that when the user is typing in the input the .editPro doesn't show().
HTML
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;">
<input type='text' />
</div>
<div class="editPro" style="width:100%;height:100%;position: fixed;display:none;background:red;"></div>
<div id='edit'>edit</div>
JAVASCRIPT
$('#edit').click(function (event) {
$(".green").show("slow");
});
$(document).keypress(function (event) {
$(".editPro").show("slow");
});
here is a Fiddle to illustrate the problem
Just check the target node. If it is not an input, then execute your script
$(document).keypress(function (event) {
if(event.target.nodeName !== "INPUT"){
$(".editPro").show("slow");
}
});
Fiddle
I have done some changes in your code hope this helps
try this FIDDLE
http://jsfiddle.net/venkat_asman/Un8yv/2/
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;z-index:100;">
</div>
<div class="editPro" style="width:100%;height:100%;position:fixed;display:none;background:red;z-index:100;"></div>
<div id='edit'>edit</div>
<input style="z-index:1000;display:none;position:fixed;" type='text' />
and JS is
$('#edit').click(function(event){
$(".green").show("slow");
$("input").show();
$('#edit').hide();
});
$(document).keypress(function(event){
$(".editPro").show("slow");
});
I'm not sure if I understand the question correctly, but maybe this is what you are looking for (it prevents the red div from appearing when you type inside a <input/>):
$('input').keypress(function (event) {
event.stopPropagation();
});
http://jsfiddle.net/Un8yv/1/
I have the following HTML code for dialog box:
<div id="modal-dialog" class="no-display">
<div class="form">
<div class="close">
</div>
<div align="center">
<h2><u>form</u></h2>
</div>
<form>
<label for="yourname">Full name:</label><input type="text" name="yourname">
<label for="email">E-mail:</label><input type="text" name="email">
<label for="message">Message:</label></textarea><textarea type="text" name="message"></textarea><br/>
<div class="clear"></div>
<p align="center"><button>Send feedback</button></p>
</form>
</div>
</div>
The javascript :
$("#clickfeed").live("click", function() {
$("#modal-dialog").removeClass("no-display");
});
I wrote:
$("#modal-dialog").live("keyup", function(e) {
if(e.keyCode === 27 && !($(this).hasClass("no-display")))
{
$("#feedback-modal-dialog input").each(function() {
$(this).attr("value","");
});
$("#feedback-modal-dialog textarea").each(function() {
$(this).val("");
});
$("#modal-dialog").addClass("no-display"); //or .hide()
}
});
The ESC key works only if an input is focused otherwise not.
I want to close modal-dialog box when pressed ESC.
Is a mistake in my JS code ?
Thank you
Binding to $("#modal-dialog") will not capture the ESC button being pressed if $("#modal-dialog" doesnt have focus.
You would be better off binding the keyup to the whole document so it would raise the keypress event regardless of where on the page had focus.
How about this:
$("html").live("keyup", function(e) {
if(e.keyCode === 27 && !($('#modal-dialog').hasClass("no-display")))
escape_check();
}
}
function escape_check() {
$("#modal-dialog").removeClass("no-display");
$("#feedback-modal-dialog input").each(function() {
$('#modal-dialog').attr("value","");
});
$("#feedback-modal-dialog textarea").each(function() {
$('#modal-dialog').val("");
});
$("#modal-dialog").addClass("no-display"); //or .hide()
}
.live() is deprecated since jQuery 1.7. Try using .on() instead.
It works just the same. See the documentation.