I have a text input field referred to as $nameEditor. I want to show this text field when a button is pressed, and hide it on blur or when the escape key is pressed.
Hiding the field on blur works every time.
Hiding the field when pressing the escape key works only the first time. Example sequence of events.
Press the button that shows the text input field.
Press escape - text input field hides
Press the button that shows the text input field again.
Press escape - the keyup event is not triggered
Press any other key and the keyup event is triggered
Press escape - the text input field hides
Relevant markup:
<button id="renameButton" title="Rename" data-icon="ui-icon-pencil">Rename</button>
<span id="assemblyNameView">Assembly Name</span>
<input id="assemblyNameEditor" style="display:none" class="ui-corner-all widget">
Relevant script:
var $renameButton = $("#renameButton");
var $nameViewer = $('#assemblyNameView');
var $nameEditor = $('#assemblyNameEditor');
function cancelEdit() {
$nameEditor.hide();
$nameViewer.show();
}
function initEdit() {
$nameViewer.hide();
$nameEditor.val($nameViewer.text()).show().select();
}
function commitEdit(newName) {
// TODO: Update the structure being edited.
$nameEditor.hide();
$nameViewer.text(newName);
$nameViewer.show();
}
$renameButton.click(initEdit);
$nameEditor.blur(cancelEdit);
$nameEditor.keyup(function(e) {
console.log(e);
if (e.keyCode === 13) {
var newName = val();
if (newName === '') {
alert("No name specified.");
$nameEditor.val($nameViewer.text()).select();
e.preventDefault();
return false;
}
commitEdit(newName);
}
else if (e.keyCode === 27) {
cancelEdit();
}
});
Why is the escape key not triggering the keyup event after the input box has been hidden then re-shown?
It's hard to explain what's wrong here. There is a strange effect when both the button and the textbox receive focus? It's impossible in a standard UI interface. In fact when you type keys other than ESC, Enter, Space and maybe more ... the typed characters are shown OK in the textbox and only the textbox receives focus after that. However if you type ESC, Enter, Space... the keystrokes seem to affect on the button and I can even see there is some color effect on the button showing that it's currently focused. This looks like a bug indeed.
However to solve this, I tried using focus() explicitly appended after .select() and it works OK.
function initEdit() {
$nameViewer.hide();
$nameEditor.val($nameViewer.text()).show().select().focus();
}
Demo.
Related
So, I have an input field for a text search. It can be triggered by pressing enter or clicking a button.
Now I'd like to add the feature that if you type "ABC", press enter, it triggers then search; and then when you add a couple of characters (e.g. "123" so you get "ABC123") but leave the input field without pressing enter, I'd like to revert the content of the input field back to "ABC", to show the user that that was the last search term.
I've implemented that with (blur)="resetInput()" on the text input, however the problem is that if the user clicks the button (after adding "123" to "ABC"), blur will trigger as well, which causes the input to get reset (to "ABC") and then the search gets executed afterwards (with "ABC" instead of "ABC123").
I've read that this is due to the order of which click and blur are being executed, and that you could circumvent that by using mousedown instead of click on the button, but that would change the behavior of the page, because the search would get executed on mouse down instead of mouse up (which is what happens if you use the (click) event)
Is there an alternative to this?
Thank you all for your answers, I have solved it now by calling event.preventDefault() on mouseDown which will block the blur event and allow the (click) event being executed with the unchanged input text.
This could be a work around if you are fine to have a very short delay in resetting the value on blur.
searchClicked = false;
// Handles the Search Button Click
handleSearchClick() {
this.searchClicked = true;
setTimeout(() => {
this.searchClicked = false;
}, 150);
// code to invoke the search
}
resetInput() {
setTimeout(() => {
if (!searchClicked) {
// reset here
}
}, 100);
}
I have a input field where when the user types in something, a list of options shows up underneath and the user will click on one of the options. The user can also press the Enter key as well. However, if the user were to enter something that is not in the dropdown that pops up and presses enter, my app crashes. I'm wondering if there is a way where I can disable the enter key on the input field so that when someone tries to press it, it just won't do anything.
Note that is in React as well!
Any help would be appreciated!
Thanks!
You can use onKeyDown event of the input field. You can call some method like below,
const onKeyDown = (event) => {
if (event.keyCode === 13) { //13 is the key code for Enter
event.preventDefault()
//Here you can even write the logic to select the value from the drop down or something.
}
You probably need event.preventDefault() method inside input change method.
Something like:
inputChange = event => {
if (event.target.key === 'Enter') {
event.preventDefault();
}
}
I have a submit button and a text field. I know how to detect when user clicks inside the text field. Basically what i am doing is, when user clicks inside the text field, hide the text.
if (submitTextArea.addEventListener) {
submitTextArea.addEventListener("click", function() {
if (submitTextArea.value == 'Enter First Name') { //Customize this text string to whatever you want
submitTextArea.value = '';
}
});
}
Now when user clicks away from the text field, that is in some other area out side the text field i want to restore the text.
How can i detect the click outside text field?
What you looking for is a blur event.
submitTextArea.addEventListener("blur", function() {
// code here
});
Here you have a entire page of JavaScript events with supported browsers : http://www.quirksmode.org/dom/events/
Also it would be better if you use focus and blur events for this task, so that click event may be used for another action.
Working fiddle: http://jsfiddle.net/urahara/6nspgrj4/2/
Code:
submitTextArea.addEventListener("focus", function () {
submitTextArea.value = 'Got focus';
});
submitTextArea.addEventListener("blur", function () {
submitTextArea.value = 'Lost focus';
});
I have two input fields i want to trigger keypress of one input field on keypress of another input field.
What i have tried is
$('#example').keypress(function(event) {
var press = jQuery.Event("keypress");
var code = event.keyCode || event.which;
press.which = code ;
$('#search').trigger(press);
});
both example and search are input fields. Why i am doing so i because when i enter text in simple field it has to enter text in another field which filters search results.
Try this :
JavaScript
$('#example').on('keypress keyup keydown',function(event) {
// create the event
var press = jQuery.Event(event.type);
var code = event.keyCode || event.which;
press.which = code ;
// trigger
$('#search').val(this.value);
$('#search').trigger(event.type, {'event': press});
});
// Omit - Check if search box reacts
$('#search').on('keypress keyup keydown',function(event) {
// sample
console.log(event.type);
});
Demo here : http://jsbin.com/pebac/1/edit
Note that even if you successfully manage to trigger a keypress event this doesn't act as a real one, meaning that the char won't be appended to the input.
Guess it's like $.click()
$('#search').keypress();
If all you want to do is to copy the content of one field to the other, I'd say it's better to do $('#search').val($(this).val()); instead of triggering the keypress event on #search.
I have 25 components which includes [textarea, textfile, radio, combo, etc...] and I have written a key event so that when "ENTER" is entered, I call a function which will submit the page.
Now my page is getting submitted when I press enter, even in the textarea which should not be. So is there any way that I can not submit the page if it is pressed in the text area?
This happens only in IE7 and IE8; it works properly in all the other browser.
you could probably detect if any of the textarea, etc is not filled out/emtpy/unset. if all of them are filled out properly, send the form.
Did you attach the "key event" to the whole form? The whole DOM? if you did that's a normal behavior.
If you want the "Enter key" to submit the page when the focus is on the submit button then apply this functionality in the onsubmit event - there of course you can perform all the validation you need.
If you just want to exclude the enter key event from the text area - perform a simple check if the the focus is in the textarea that momemnt.
The default behaviour of a form is to submit if the user hits enter inside the form unless the focus is on a textarea, so what you want is the default behaviour. Remove whatever code you have that currently handles keypresses for the form and you'll have what you want.
I'm not sure if this will suit your needs, but you can disable the enter key inside the textarea with something like this:
$(document).ready(function(){
$('textarea').keypress(function(e){
var key = (window.event) ? e.keyCode : e.which;
if ( key == 13 ) {
return false;
} else {
return true;
}
})
})