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/
Related
I currently have a button with an onclick attribute, directing to a JS function.
After I click it with my mouse, pressing the Enter key clicks the button as well, which I want to disable.
My button:
<button onclick = "action()">Button</button>
My JS function:
function action(){
//do something
}
I tried solutions from Disable Enter Key and Disabling enter key for form, but they don't work.
How do I solve this? Should I not use onclick? I would like a solution in pure JS.
You could have an event listener listening for a keydown event and check if it's the enter key and the target your button. In that case disable the event.
Something like this should work, you can add the correct type:
window.addEventListener('keydown',(e) => {
if (e.keyIdentifier =='U+000A' || e.keyIdentifier =='Enter' || e.keyCode == 13)
if (e.target.nodeName=='BUTTON' && e.target.type=='') {
e.preventDefault()
e.stopPropagation()
return false
}
}, true);
try setting the button to .blur() or set focus to another element
<button onclick = "action();">Click this</button>
function action(){
//do something
this.blur()
}
I have following sample code at https://js.do/sun21170/254818
My goal is to prevent editing of text inside the textbox without using the readOnly or disabled attribute. In above demo code, I am canceling the keyup event when Backspace is pressed, but this is having no effect.
Question: Is it possible to cancel the Backspace key press using JavaScript or jquery when inside a text box without using readOnly or disabled attribute of textbox?
The code of my demo is also as pasted below.
function keyPressed(e) {
e.preventDefault();
}
function keyUp(e) {
e.preventDefault();
}
#text1 {
width:500px;
}
<input type="text" id="text1" onkeypress="keyPressed(event)"
onkeyup="keyUp(event)" value="This is some text that should not be editable"></input>
I change onkeypress="keyPressed(event)" to onkeydown="keyPressed(event)", it works.
You could use the below code snippet:
$(document).keydown(function (e) {
var element = e.target.nodeName.toLowerCase();
if ((element != 'input' && element != 'textarea') || $(e.target).attr("readonly") || (e.target.getAttribute("type") ==="checkbox")) {
if (e.keyCode === 8) {
return false;
}
}
});
Certain things to keep in mind when implementing such a functionality, you should also be checking for readyOnly textBoxes or textAreas since a backspace in such an area will result in you leaving the page (assuming you want to prevent a backspace as well).
EDIT: The code is in jQuery.
Change your onkeypress event to onkeydown and your code will work with backspace and delete button as well. The onkeyup event is not necessary
<input type="text" id="text1" onkeydown="keyPressed(event)" value="This is some text that should not be editable"></input>
I think you have to trigger the keydown event. But this is a working example. Just give every input you don't want to change the class notEditable and the jquery code will prevent the input field to be edited.
$('.notEditable').on('change keydown', function(e){
e.preventDefault();
});
#text1 {
width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" class="notEditable" value="This is some text that should not be editable"></input>
This code is a little bit cleaner since you only have to add the class and don't need the functions to be called in the html code. However, if you would like to keep the function call in your code, simply change the your input field to this:
<input type="text" id="text1" onkeypress="keyPressed(event)" onkeydown="keyUp(event)" value="This is some text that should not be editable"></input>
To move focus on the end of inputs when user click the input box,
I use something like this,
$(function() {
$('#test-input').on('click', function(evt) {
$target = $(evt.target);
var val = $target.val();
$target.val('').val(val);
});
}())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="test" id="test-input" value="abcdefgh" />
But if I change the 'click' to 'focus', it doesn't work.
$(function() {
$('#test-input').on('focus', function(evt) {
$target = $(evt.target);
var val = $target.val();
$target.val('').val(val);
});
}())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="test" id="test-input" value="abcdefgh" />
How different onClick and onFocus actions in that case?
There's some differences:
onClick: This event is fired whenever the user clicks in an object, like a button, an image, an input... After the click, then comes the:
onFocus: This event is fired when an element is selected, it doesn't need to be clicked, it can be done programmatically, calling .focus() or using the Tab key, for example. Also, using onfocus instead of onclick, can help to avoid bubbling.
To finish, use the snippet below (I added more inputs, cycle through it with TAB (or click too), you'll see the caret going to end on all of then.
Why I added a timeout?
Chrome Browser has an odd quirk where the focus event fires before the cursor is moved into the field, so, the event must wait to the cursor to get there before moving it to the end.;
$(function() {
$('.test-input').on('focus', function(evt) {
that = this;
setTimeout(function() {
that.selectionStart = that.selectionEnd = 10000;
}, 1);
});
}())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="test" class="test-input" value="abcdefgh" />
<input type="text" name="test" class="test-input" value="a1b2c3" />
<input type="text" name="test" class="test-input" value="abcdefghijklmnop" />
Extra:
If you are programming just for mobiles, will be nice to take a look at touchEvents (https://developer.mozilla.org/pt-BR/docs/Web/Events/touchstart)
This should be working just fine the first time you click on the textbox. This is when the focus event is triggered, since you're actually 'focusing on' the item. From then on, until you click anywhere outside the element, your item will already have the focus and therefore will not execute the onfocus event.
The main difference is focus event call any time when you will focus on input field like if you use tab button and focused on input field but in case of click you need to click on input field.
I think that it has to do with the fact that the code executed at the click is executed before focusing on the input and affecting a position to the cursor.
On the other hand, when you listen to the focus event, the cursor has already a position and stays at this position.
That's pure personal theory. However, if you want to make it work, I found a great solution that works in Chrome on this question: Use JavaScript to place cursor at end of text in text input element
You need to clear the value of the input, wait for one millisecond, and reapply the value:
$(function() {
$('#test-input').on('focus', function(evt) {
$target = $(evt.target);
var val = $target.val();
$target.val('');
setTimeout(() => {
$target.val(val)
},1)
});
})
I am trying to trigger the submit button when a user presses enter. Works great for all browsers except Internet Explorer 9. Strange thing is that IE insists on also triggering the click for another button I never told it to. Am I doing something wrong or how to fix this?
Below is my code. Pressing enter in IE triggers the submit click as expected, but for some reason also triggers the "some button" click (even without my keypress listener):
$('input[type=submit]').click(function () {
alert('Submit click');
});
//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
var keycode = event.keyCode || event.which;
if (keycode == 13) $('input[type=submit]').click();
});
//ROUTE CLEAR HANDLER
$('button').click(function () {
alert('Button click');
});
You can see the bug in action here: http://jsfiddle.net/h64xD/
Here are a couple of things to consider:
IE9 counts the <button/> element as type="submit" by default. So to make it non-submit, you have to be explicit:
<button type="button">Some button</button>
If you do that, you will notice that the emulated click event now doesn't trigger the <button/> but still fires 2 events. The reason is that, because you haven't explicitly defined a <form/> element, IE9 assumes the controls as being in a form, and thus pressing enter in the textbox triggers 2 events:
the one that you are emulating
the default form submit button behaviour
So again to get around this issue, you have to be explicit:
<button type="button">Some button</button>
<form><input type="text" /></form>
<input type="submit" value="Submit" />
Now, these are the reasons that you are seeing the behaviour in IE. #MrSlayer's answer caters to the second issue of stopping the keypress event after you have satisfactorily handled it, using preventDefault()
The Enter key has a default behavior to submit, so you need to prevent the default behavior from executing. Because the button tag is, by default, type="submit" it is executing that button when the Enter key is pressed.
//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
var keycode = event.keyCode || event.which;
if (keycode == 13)
{
event.preventDefault();
$('input[type=submit]').click();
}
});
How about triggering the form's submit instead of a button click?
$('input[type=text]').keypress(function(e) {
var keycode = event.keyCode || event.which,
frm = $(this).closest('form');
if (keycode == 13) {
e.stopPropagation();
frm.submit();
return false;
}
return true;
});
--EDIT--
Updated Slightly to stop the event propagation.
First off, you don't need to manually attach an event to submit a form when the user presses enter - the browser already handles that.
Oddly enough, this was to do with the order of the elements, implicit form-associations, as well as the fact that IE handles buttons as submit elements.
Try swapping the order of these buttons to see what I mean:
<input type="text" />
<input type="submit" value="Submit" />
<button>Some button</button>
Naturally, the browser is already instructed to listen to respond to the Enter on a text-input. This results in the browser clicking the associated submit button. Further, since you haven't explicitly provided a form, or associated elements with one another via their form attribute, the browser is attempting to make that relationship for you.
In your code, the <button> element was assumed to be the submit button of the text-input (because it was the first submit button in the implicit form). As such, anytime you press Enter on the text-input, the browser naturally raises the click event of the associated button.
If you re-order the elements, as I have above, we see the opposite take place. IE associates the other <input> element with the text-box. And pressing Enter on the text-box implicitly raises the click event on the submit input.
You can confirm this behavior by comparing the .form attributes of various elements. For instance, adding some id values will give us easier access to these:
<button id="fiz">Some Button</button>
<input id="foo" type="text" />
<input id="bar" type="submit" value="Submit" />
Then run some quick comparisons:
var button = document.getElementById("fiz");
var text = document.getElementById("foo");
var submit = document.getElementById("bar");
button.form === text.form; // true
submit.form === text.form; // true
button.form === submit.form; // true
So in the end, it's up to you to remove the ambiguity between the two buttons, by declaring the <button> element to be type='button', or by placing it after the intended submit button.
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