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);
}
Related
I am using Extjs 4 and overriding a Ext.util.Observable as the name Ext.tree.Search. In the extended class I have implemented event listener onTriggerSearch so when the user types some words in input and presses enter key, this function is get called and do some search job. The search plugin has a view like the image below:
If the user submit the search by pressing magnifier icon, everything goes right but if press enter key, after doing the search, the page gets refreshed. How should I catch this event (key press event) completely and stop propagating. The thing I have tested by now is lines below:
, onTriggerSearch: function (a, event, c) {
// stop event propagation
if (event.browserEvent.stopPropagation)
event.browserEvent.stopPropagation();
if (event.browserEvent.cancelBubble != null)
event.browserEvent.cancelBubble = true;
// event.browserEvent.bubbles = false;
// event.browserEvent.cancelBubble = true;
// event.browserEvent.stopPropagation();
// ======================
... some other jobs
return false; // to stop propagation
}
There was some weeks I had trouble with this issue and by now I have discovered that the problem is with the form containing this input. I have prevented form to submit using these answers:
How to prevent ENTER keypress to submit a web form?
Done.
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.
I have an input text with an onchange event that calls a function in which an alert box displays. I also have a button whose onclick calls a different function. If the user makes a change in the input text and immediately clicks the button, the onchange event fires, displaying the alert box, but the code in the function for the onclick of the button doesn't execute. I've read that this has something to do with event bubbling, but I haven't seen any solutions. Is there a solution? Is it even possible?
Here is a little example:
<input type = "text" onchange = "showAlert1()">
<input type = "button" id = "al2" value = "Click Here" onclick = "showAlert2()">
<script type = "text/javascript">
function showAlert1()
{
alert("ONE")
}
function showAlert2()
{
alert ("TWO");
}
</script>
The onclick event handler showAlert2() doesn't fire if a change is made to the input value and user immediately clicks the button.
I want, that you write something to the input-field, click IMMEDIATELY the button and it fires
alert("ONE") AND alert("TWO")...
OR ONLY
alert("TWO")
As far as I can tell it's not a problem with bubbling (which is a problem with onchange but is a red herring in this case). The problem is that clicking the button after changing the field value is triggering blur, causing showAlert1() to run before the button's onclick gets triggered.
Here's a quick example of it working the way you described but you'll see it's an unreliable hack more than anything. Basically it buffers the execution of each function so that the button's onclick can be triggered. However it falls over if you click and hold the button longer than the buffer that is set within each function via setTimeout().
function showAlert1() {
setTimeout(function(){ alert("ONE") }, 250);
}
function showAlert2() {
setTimeout(function(){ alert("TWO") }, 250);
}
Demo: jsfiddle.net/5rTLq
how about this
function showAlert1(a) {
alert(a.value); /* use setTimeout to delay */
}
function showAlert2() {
alert(document.getElementById('txt').value);
}
test: http://jsfiddle.net/C3jRr/2/
I need to trigger an input change event, but only if the value changed. And I need this done from a keyboard event. Is there a way to invoke the browser's change mechanism which will either trigger the change event to fire, or will not depending on if the value was modified?
Example:
User clicks on an input field
User does not modify value of the field
user presses a key causing the input field to blue
onchange does not get triggered.
vs
User clicks on an input field
User modifies the value of the field
user presses a key causing the input field to blue
onchange gets triggered.
Is this possible? Or I need to do the onfocus save value, onblur compare and possibly call onchange, but only if onchange was not already called because the user just navigated away by clicking vs say a keyboard trigger.
What key is it? If that key isn't a standard input key, set the onchange to check the field for the change of the field.
You also can bind an onkeypress do the document, and return:false; when the key that changes the input to blue is pressed.
A little more context could help.
If I get you right, you need two variables to remember previous and current states of the input, and a listener to handle interaction:
<html>
<head>
<script language="javascript">
var startFieldValue = "Some value, possibly value of input when it is loaded";
var endFieldValue = "";
var focusFlag = 0;
function interact(keyEvent) {
if(focusFlag == 1)
return true;
var key = keyEvent.keyCode? keyEvent.keyCode : keyEvent.charCode
if(String.fromCharCode(key) == "a") {
if(startFieldValue != endFieldValue) {
var elem = document.getElementById('input-to-be-changed');
elem.style.backgroundColor = "blue";
startFieldValue = endFieldValue;
}
}
}
</script>
</head>
<body onkeypress="interact(event);">
<input id="input-to-be-changed" onchange="endFieldValue = document.getElementById('input-to-be-changed').value;" onfocus="focusFlag = 1;" onblur="focusFlag = 0;">
</body>
Just read the comment on previous post, you should have global idea of what's going on, though. Changes are removing checking for focus, and placing listner (onkeypress) inside every input. The function interact should take 2 values - event and id of input to focus next. Also focusing new element should change startFieldValue.
Sorry to not write code itself, but it's kinda late and I really need some sleep.
I have a text area and a "add" button on a form. By default the text area is shown as shrinked and grayed out. On focus it will be highlighted by changing the style. On blur it should go back to previous state. Along with highlighting the textarea, add note should toggle as visible and hidden. The problem is when i enter the data in text area and click on the add button, the blur event is hiding the add button and the event on the add button is never triggered.. any solution??
It seems like my question is not clear...
The solution is something like execute the blur event except that the next focused element is not the "add" button...
If there is text entered is it safe to assume you don't want to toggle the button because the user has the intention of entering a note? If so you could do something like:
$(textBox).blur(function() {
if($(this).val().length == 0) {
//change the style
//hide the button
}
})
You need to unhighlight your textarea and hide the "add" button only if there is nothing entered in the textarea:
$('textarea').blur(function() {
if($(this).val() != '') {
// unhighlight textarea
// hide "add" button
}
});
This way the user always sees the field and button if they actually entered something into it, regardless of whether it has focus or not.
Put a small delay between the focus leaving the textbox and the button being hidden, e.g.
function textBox_blur(evt)
{
window.setTimeout(
function() { button.style.display = 'none'; },
200 // length of delay in milliseconds
);
}
This will leave enough time for the click to process (though you might want to play with the length of the delay)