Develop Reference

Html: Contenteditable how to detect before deleting element after pressing backspace?

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>

Moving button doesn't receive click event

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/

HTML moving from last input field to first

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).

disable javascript function

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/

Toggle div on click or touch and hide on click/touch outside

I'm trying to support both mouse and touch events for a div that I want to show and hide. My mouse events work well, but I'm not sure of how to get this to work on a touch-based device (iPhone, iPad or Android-based phone).
The interaction should be that when a user clicks or touches the trigger, the "search" box is shown, and if they click/touch outside of the opened search box OR re-click/touch the trigger, it should close (hide).
Here's my HTML:
<div id="search">
<div class="search-link">
Search
</div>
<div class="search-box">
<form action="/search" id="search_form">
<input placeholder="Search" type="text" />
<input id="search-submit" type="submit" value="Submit" />
</form>
</div>
</div>
And, my JavaScript (using jQuery):
var $searchBox = $('#search .search-box');
var $searchTrigger = $('#search-trigger');
$searchTrigger.on("click", function(e){
e.preventDefault();
e.stopPropagation();
$searchBox.toggle();
});
$(document).click(function(event){
if (!($searchBox.is(event.target)) && ($searchBox.has(event.target).length === 0)){
$searchBox.hide();
};
});
Working example: http://jsfiddle.net/T5HMt/

http://jsfiddle.net/LYVQy/2/
I just included JQuery Mobile and changed your 'click' events into .on('tap',function(e))...
Jquery Mobile seems to treat 'tap' events as clicks on desktop browsers, so this seems suit your needs.
$searchTrigger.on("tap", function(e){
e.preventDefault();
e.stopPropagation();
$searchBox.toggle();
});
$(document).on('tap',function(event){
if (!($searchBox.is(event.target)) && ($searchBox.has(event.target).length === 0)){
$searchBox.hide();
};
});

This is enough: JsFiddle
$searchTrigger.on('click', function(e) {
$searchBox.toggle();
e.preventDefault();
});
it works for screen and touch devices.

You can also use setOnClickListener event and override onClick function like this :
btnclickme = (Button) findViewById(R.id.btn_clickme);
btnclickme.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// do your code here
}
});