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';
});
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 written a blur() event to handle focus out event on a text field. The code looks like this.
$("input[type=text]").blur(function (event) {
if(this.value){
//do something
}
event.originalEvent.handled = true;
});
I have a situation where a text-field is automatically getting focus with the text from previous page.
To give an example, in flipkart.com, type some text in the search field and click search. My event handler must execute for focus out event. (It is happening correctly).
In the next page, the text entered is prepopulated in the text-field and focus is also on it. So in this page, if I do some action, the text-field will lose focus and the same event gets called again. I don't need this to happen.
Is there a way to avoid this? By combining two event handlers? Please help.
Change your code so that the function is only bound to the element after a user explicitly interacts with the element like so:
$("input[type=text]").on('keyup keypress change click', function() {
$("input[type=text]").blur(function(event) {
if (this.value) {
//do something
alert('blur was called after interacting with element');
}
event.originalEvent.handled = true;
});
});
$('#test').focus();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" value="some value">
Try this : You know the text value from previous page, just compare it with current text value, if both same then don't do any action. See below code
$(function(){
var prevTextValue = "read your previous text value here";
$("input[type=text]").blur(function (event) {
//check if value is not empty and not equal to previous value
if(this.value!="" && this.value != prevTextValue){
//do something
}
event.originalEvent.handled = true;
});
});
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 am trying to get a separate div (a custom 'continue' button) to appear when the user starts typing into a text input.
I am currently using this:
var submitButton = $('#submitButton');
submitButton.hide();
submitButton.on("showSubmitButton", function(event) {
$( this ).show();
$( this ).css('opacity', '0');
$( this ).fadeTo(400, 0.6);
});
var textInput = $('#textInput');
textInput.click(function() {
$( this ).find('input:text').val(''); // this clears the default 'type your name here' text
});
textInput.keyDown(function() {
submitButton.trigger("showSubmitButton");
});
When I had the "showSubmitButton" line inside the textInput.click function the submit button appeared on the click, but I want the button only to appear when the user has typed something into the input.
I have also used .keyPress(), but both key events trigger a 'has no method' error. I assume I must be using them incorrectly, but I don't know how.
The shorthand functions for event handlers aren't camel case, so it's .keydown(), .keypress(), etc. rather than .keyDown() or .keyPress(). That said, I'd use either the input or keypress events (depending on browser support), with a check to see if the value of the textbox isn't an empty string:
textInput.find('input:text').on('input', function(e) {
if($.trim(this.value).length > 0) {
submitButton.trigger('showSubmitButton');
}
else {
// consider hiding the submit button?
}
});
It is not keyDown - it is keydown
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)