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>
Related
I have a button with a bootstrap element on it.
<button title="delete" type="button" class="btn btn-default btn-sr" data-confirm="Are you sure to delete this item?"><span class="glyphicon glyphicon-trash white"></span></button></a>';
It has a css property which I color it red.
When user clicks the delete button, a JavaScript confirmation will come out.
The problem is whenever i click cancel, the button will be focused. How do I remove the focused button?
Here is the jQuery code:
<script>
$(document).on('click', ':not(form)[data-confirm]', function(e) {
if( !confirm($(this).data('confirm')) ) {
e.stopImmediatePropagation();
e.preventDefault();
}
});
</script>
Maybe could you try to blur() the button?
<script>
$(document).on('click', ':not(form)[data-confirm]', function(e) {
if( !confirm($(this).data('confirm')) ) {
e.stopImmediatePropagation();
e.preventDefault();
$(this).blur(); // to make the focus disappear
}
});
</script>
$(this).blur();
removes the focus
$(this).blur();
over
document.activeElement.blur()
I'm facing a problem with dialog closing in JQuery
Here's the code I have :
$(window).on("click",function(e){
if($(e.target).not("#test")){
$("#test").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="$('#test').show()">
Well, function works like it supposed to(closes dialog when I click outside of it's content) but then I can't toggle it again. Because of the function, I suppose.
Also I tried to fix it with such way but it don't work either :
if($("#test").css("display","block")){
$(window).on("click",function(e){
if($(e.target).not("#test")){
$("#test").hide();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="$('#test').show()">
Is there any way to fix this?
That you very much for spending your precious time with my problem!
Thank you very much for any help or advice!
Your submit click event fires first and then the window click event fires. Hence your dialog keeps getting hidden. Ensure you are not propagating the click event from your submit button if you want to show the dialog.
You might want to add validation to ensure your dialog is not already open when clicking submit though.
$(window).on("click", function(e) {
console.log('window click');
if ($(e.target).not("#test")) {
$("#test").hide();
}
});
$('input[type=submit]').on('click', function(){
$('#test').show();
event.stopPropagation();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="">
You don't need show or hide functions, you just need to use the open property and change it to false or true.
$(window).on("click",function(e){
if($(e.target).not("#test") && !$(e.target).is("#submit")){
$("#test")[0].open = false; // or document.getElementById("test").open = false;
}
});
$('#submit').click(function() {
$('#test')[0].open = true; // // or document.getElementById("test").open = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" id="submit">
I have a javascript that prevents right click on an HTML page:
document.addEventListener("contextmenu", function(e){
e.preventDefault();
}, false);
I have a <input> tag on that same page with the name "Link" that I want the right click to happen on.
How can I achieve that?
You can check and test e.target of the event:
document.addEventListener("contextmenu", function(e){
if (e.target.tagName.toLowerCase() === 'input' && e.target.name === 'Link') {
return; //pass
}
e.preventDefault(); // prevent others
}, false);
Put an if statement inside your event listener:
document.addEventListener("contextmenu", function(e){
if (e.target.name !== "Link") {
e.preventDefault();
}
}, false);
So it basically says: when the target element does not have a name of Link prevent the right click.
<div>
This is the Phone and NO ONE SHOULD RIGHT CLICK THIS! >:) </br>
<img oncontextmenu="return false;" class="tlClogo" src="http://i.imgur.com/0atiS5C.jpg" style="height: 120px; width:120px;">
</div>
</br></br></br></br>
And this is the Keyboard, ofcourse yo can right click this :)</br>
<img src="http://i.imgur.com/xkrKz1X.jpg" style="height: 120px; width:120px;">
Working Fiddle Example
I have a text field which should hide when it loses focus. I also have a button. The problem is, when you click the button, the text field first loses focus, which moves the button, preventing it from receiving the click event.
HTML:
<div>
<p> Focus on the text field, and then click the button </p>
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br><br><br>
</div>
<button id="clickMe">click me</button>
</div>
JS:
$(function() {
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
});
$('#clickMe').on('click', function(e) {
alert('clicked!');
});
});
http://jsfiddle.net/u86ycf5e/
The button should still move. But it should also receive the click event.
Add a container with a height around the element you are hiding: Fiddle
.container {
height: 50px;
}
HTML
<div class="container">
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br>
<br>
<br>
</div>
</div>
Alternatively, you could make the element hide after a short delay via setTimeout like so:
$('#focusMeOut').on('focusout', function (e) {
setTimeout(function() {
$('#hideMeOnFocusOut').hide();
}, 250);
});
Other fiddle
Try ...
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
if (e.relatedTarget.id==="clickMe") {
$("#clickMe").trigger('click');
}
});
This will check to see if the button was clicked and fire it ...
Hide the text box instead with:
$('#focusMeOut').on('focusout', function(e) {
$(this).hide(); //this line changed
});
and optionally set the height of the <div> to prevent button moving with this CSS:
#hideMeOnFocusOut {
height:80px;
}
You might want to rename your IDs more appropriately now.
http://jsfiddle.net/u86ycf5e/4/
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).