I am handling mousedown & oncontextmenu events to prevent text & image selection, right click and drag. The code is as follows -
<body oncontextmenu="return false;" onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">
<input type="text" name="testInput" id="testInput">
</body>
I guess the problem is it is also preventing the focus on input elements, as I am preventing default & returning false for onmousedown event, so it is not letting control switch to input focus, so I cant type any thing inside it. I tried to debug it by following code.
<script type="text/javascript">
$(function(){
$( "#testInput" ).on("focus",function(){
console.log("input focused");
});
});
</script>
When I removed the onmousedown attribute from body, it is giving me the desired message on cosole.
any help... Thanks in advance.
You can check if the mousedown/contextmenu event is happening on any inside element and allow the default action if so and if not prevent the default action by using below
document.getElementsByTagName("div")[0].addEventListener("mousedown",function(e){
if(e.target.id=="testInput"){
} else{
e.preventDefault();
}
});
document.getElementsByTagName("div")[0].addEventListener("contextmenu",function(e){
if(e.target.id=="testInput"){
} else{
e.preventDefault();
}
});
Check the Fiddle
Related
I have an input field:
<input id="audio_file" type="file" accept="audio/*" />
my problem is that once I've clicked it, if I press space after that it simulates the input being clicked again. How do I stop this?
Once clicked, the element gets a keyboard focus. And the next time you press the space bar or enter "click" occurs again. If you need to avoid it, simply remove the keyboard focus of the element using the blur() function.
window.onload = () => {
let input = document.querySelector("input");
input.addEventListener("click", () => input.blur());
}
<html>
<head></head>
<body>
<input type="file" />
</body>
</html>
document.body.onkeyup = function(e){ if(e.keyCode == 32){ } }
Handle space bar press maybe? Then just don't execute any code.
If you'd like to avoid handling keypresses globally, you could use jQuery to prevent the default onClick event for that specific button. Something like:
$("#audio_file").on("click", function(e) {
if (e.originalEvent.detail == 0)
e.preventDefault();
});
Edit: JSFiddle: https://jsfiddle.net/5L01kjkk/
Sorry for my English, I'm not native English speaker.
I have problem with my code. I have on page something like this:
$('#hook label').on('click', function() {
console.log('ok');
icon = $(this).next('input').val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hook">
<label><input> <img src="http://placehold.it/35x35" ></label>
<label><input> <img src="http://placehold.it/35x35" ></label>
<label><input> <img src="http://placehold.it/35x35" ></label>
<label><input> <img src="http://placehold.it/35x35" ></label>
</div>
And this code is running twice if I click on image, but only one when I click on input or label element. How can I prevent to running this twice?
Here is example: http://jsfiddle.net/00akgoe7/2/
It's because of the default behavior of label. To stop that, you need to tell to the event object to stop is default behavior like this:
$('#hook label').on('click', function(ev) {
ev.preventDefault();
console.log('ok');
icon = $(this).next('input').val();
});
Clicking on a label associeted with the for attribute or inside the label, focus the input with a "fake" click event. This is why you get the event twice since by extension, if you click the input, you click the label (the parent) also.
It's two times because when you click on the label it send a click event also to the input and the new event bubbles back to the label. It's tricky :)
It's in all browsers for a better form usability.
So the another possible solution is:
$('label').click(function(e) {
if (e.target.tagName === "LABEL") {
alert("!! here")
}
});
Try it live: http://jsfiddle.net/8qffhwm3/2/
You just need to add a preventDefault().
$('#hook label').on('click', function(e) {
e.preventDefault();
console.log('ok');
});
I expect that it help you.
If you want prevent from the event being fired twice, you can use the 'mousedown' event handler. It will just be triggered once, as it is not triggered by standard by clicking the label.
Does anyone know how to make a simple JavaScript onclick event fire if the process of clicking the element causes an onchange event to fire elsewhere on the page? I've created a very simple page to demonstrate this problem:
<html>
<body>
<input type="text" name="test" id="test1" onchange="return change(event);" />
Bang
Boom
<script type="text/javascript">
function change(event) {
alert("Change");
return true;
}
function bang() {
alert("Bang!");
return true;
}
function boom() {
alert("Boom!");
return true;
}
</script>
</body>
</html>
If you click the bang link you get the Bang! alert. Boom gives you the Boom alert. And if you enter text in the text field and tab out you get the Change alert. All well and good.
However, if you enter text in the text field and, without tabbing or clicking anything else first, click either Bang or Boom you get the Change alert and nothing else. I would expect to see the Change alert followed by either Bang or Boom.
What's going on here? My change event returns true. How can I ensure that my click event is fired?
Okay... So it seems like it's time for a bit of an explanation.
Explanation
You encounter this error because the onchange event is triggered as soon as focus is moved away from the element. In your example the action that takes focuse away from the input element is the mousedown event which triggers as you click down on the mouse. This means that when you mousedown on the link it fires off the onchange function and pops up the alert.
The onclick event on the other hand is triggered on the mouseup event (i.e. when you release the pressure on the mouse - prove this to yourself by click, hold/pause, release on a onlcick event). Back to your situation... Before the mouseup (i.e. onclick) happens the focus is moved to the alert triggered from your onchange function.
Fix
There are a couple of options to fix this. Most simple change from using onclick="...." to onmousedown="....".
Alternatively, you could use setTimeout like,:
function change() {
setTimeout(function (){
alert("Change event")
}, 100)
}
I suggest the onmousedown method as preferred. The setTimeout method will fail if you click and hold on the link for more than the prescribed amount on the timeout.
The problem is that the alert() function grabs the event chain somehow, test this:
<html>
<body>
<input type="text" name="test" id="test1" onchange="return change(event);" />
Bang Boom
<script type="text/javascript">
function change(event) {
console.log("change");
return true;
}
function bang() {
console.log("bang");
return true;
}
function boom() {
console.log("boom");
return true;
}
</script>
</body>
As you'll see you'll get the expected behaviour in the console.
JSBin
Rather than try and replicate your problem, I just created the solution in jsFiddle.
I seperated your HTML and your JavaScript.
HTML
<input type="text" name="test1" id="test1" />
Bang
Boom
JavaScript
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
var test3 = document.getElementById("test3");
test1.onchange = function (event) {
alert("Change");
};
test2.onclick = function () {
alert("Bang!");
};
test3.onclick = function () {
alert("Boom!");
};
After making a change in the text box and click out side of it will trigger the onchange event, and the onclick events will still fire. If you are expecting the change alert to fire for each key stroke change onchange to onkeyup.
HTML:
<div class="infoBox2 blackBoxHover">
<h2>direct Link: </h2>
<input class="fileInput" type="text" id="directlinkText" name="directlinkText" />
</div>
JAVASCRIPT:
$('#directlinkText').parent('div').click(function () {
alert('test');
});
The thing is I want to see test when I click anywhere on the div EXCEPT for if I click on the input that's within it.
Right now clicking the textbox input also fires the div's click event
how do I fix this?
$('#directlinkText').parent('div').click(function (e) {
if(e.target.id === "directlinkText"){
return;
}
alert('test');
});
This is because your input is inside div. Attach event to your text box and then stop event propagation.
$('#directlinkText').click(function(event) {
event.stopPropagation();
});
This will stop event propagation.
You can stop the propagation of the click event when it originates from the input elements like this:
$('#directlinkText').click(false).parent('div').click(function () {
alert('test');
});
This returns false for the click event directly on the #directlinkText element. Which in a jQuery event handler is the same as calling: event.preventDefault() and event.stopPropagation(). If you just wanted to stop the propagation and not prevent the default behavior then you could use:
$('#directlinkText').click(function (event) {
event.stopPropagation();
}).parent('div').click(function () {
alert('test');
});
basically I have this:
<asp:TextBox runat='server' />
<button id='b2'>hi</button>
<script>
$('#b2').click(function(e){
e.preventDefault();
alert('you clicked the button');
});
</script>
the problem is that when hitting enter inside the textbox the click event on the b2 occurs so I get the js function executed, anybody knows how to stop this?
Pressing the return/enter key while focusing a text box is treated the same way as clicking on the submit button. What you can do is attach a keypress event handler to all text boxes in your form, and simply ignore the return key press.
Code looks like this:
$('input[type="text"]').keypress(function(event) {
if(event.keyCode == 13) {
event.preventDefault();
alert("enter!");
}
});
Note that I don't use ASP, so I tested this with a standard HTML text box and submit button.
adding the attribute type="button" to the button tag stopped this behavior o_O