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)
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'm trying to edit data held in a table and choosing to use contentEditable on divs inside the <td>s, and I'm running into a really weird issue. When I go to edit it the first time, I have to click in twice, every other time after that I only have to click in once. But on the first attempt to edit I have to click in twice. Here is an example table row from my HTML:
<tr style="width:100%"> <td><div class="results" onblur="blurMe(event)" onclick="darkenBox(event)" onkeypress="enterKey(event)" >Adam McGurk</div></td><td><div class="results" onblur="blurMe(event)" onkeypress="enterKey(event)" onclick="darkenBox(event)">amcgurk#shinesolar.com</div></td><td class="delete-sales-person"><span class="delete-icon"></span></td></tr>
And here is the appropriate JS:
//Only to be used with changing data to gray on click and border on hover.
function darkenBox(e){
const ele = e.path[0];
ele.setAttribute("contenteditable", true);
console.log("Editing cell data");
ele.classList.add("darkenBox")
}
// Allows user to edit content by click
function clickEdit(e) {
e.path[0].setAttribute("contenteditable", true);
}
//Deleted placeholder text on click
function clearText(e) {
const ele = e.path[0];
ele.setAttribute("contenteditable", true);
ele.innerText='';
}
// Allows user to stop editing by pressing the, "Enter" key.
function enterKey(e){
const keyCode = e.keyCode;
const ele = e.path[0];
if (keyCode === 13) {
ele.classList.remove("darkenBox");
ele.setAttribute("contenteditable", false);
}
}
function blurMe(e) {
const editedElement = e.path[0];
editedElement.classList.remove("darkenBox");
}
Why is it requiring me to click it twice to edit the first time?
The first time you click it, it sets contenteditable to true. Clicking away doesn't unset that. The second time you click, contenteditable is still true. This allows you to activate the element and edit it right away. If you want to edit it on the first click, you can have all elements you intend to edit start with contenteditable enabled. Or, you can focus the element after enabling contenteditable.
ele.setAttribute("contenteditable", true);
ele.focus();
On an unrelated note, this currently doesn't work at all on firefox and I recommend that you use e.target instead of e.path[0].
Your divs start without contenteditable set. When you click on them (the first time) you set contenteditable to true, but the click is already handled so it won’t trigger an edit.
Only on the next click is the browser gonna allow for edit as now contenteditable is true.
Set contenteditable to true directly in the html and should work.
I am trying clear a div when a user clicks or tabs off of an input, but I don't want the div cleared if the user changes to a different window or browser tab.
What I have so far clears the div in both cases:
$input.on('blur focus mousedown', function () {
$input.val("");
$("#cors-test-invalid").html("");
$("#cors-test-views").html("");
$("#cors-test-workbooks").html("");
$("#cors-test-datasources").html("");
$("#cors-test-projects").html("");
$("#cors-test-users").html("");
});
You can do it like this
$(document.body).on('click',function(){
//here its a click on body which eliminates the other tabs or windows
if(!$input.is(":focus"))
{
//here element doesnt have focus, so we are good to do the logic
$input.val("");
$("#cors-test-invalid").html("");
$("#cors-test-views").html("");
$("#cors-test-workbooks").html("");
$("#cors-test-datasources").html("");
$("#cors-test-projects").html("");
$("#cors-test-users").html("");
}
});
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 an autocomplete dropdown that appears when a user starts typing in a textbox (I'm using jquery mobile but I don't think that's important to my problem). I want to be able to hide the whole dropdown list when a user clicks anywhere on the page. However, I don't want to hide the dropdown when a user actually clicks on the dropdown itself.
Is there a way I could catch the click event in order to know what was clicked?
Here's my blur function:
//hide autocomplete when dropdown is not clicked
$("#search-div input").blur(function () {
$("#autocomplete-list").hide();
});
I was thinking of somehow putting an if statement in my blur function. Here's my pseudo code:
if( dropdown clicked)
{
run code to take text from dropdown and place in textbox
}
else
{
hide dropdown
}
Would it be possible to know whether my dropdown is clicked or something else is clicked while in my blur function? When I debug my javascript I'm only seeing an event that's related to the textbox doing the blur()
Edit:
Here is a function I'm using to handle when the dropdown is clicked:
$( document).on( "click", "#autocomplete-list li", function() {
var selectedItem = event.target.innerHTML;
$(this).parent().parent().find('input').val(selectedItem);
$('#autocomplete-list').hide();
runSearchQuery();
});
You can listen for any click, not just a blur, and then check what the clicked element was. e.currentTarget gives you what was clicked.
var clickHandler = function(e) {
if ($(e.currentTarget).hasClass('dropdown')) {
// do nothing
} else {
// Make sure you unregister your event every
// time the dropdown is hidden.
$(window).off('click', clickHandler);
// hide
}
}
// When the dropdown comes down, register an event on the whole page.
$(window).on('click', clickHandler);