So, I've got this input of type checkbox for a dropdown menu on the top.
When I click on it and select something, for some reason clicking the spacebar toggles it on/off...clicking once elsewhere doesn't fix it either, I have to click outside twice.
I don't quite understand why I have to click twice outside, but regardless, I want to know how I can stop this from happening. I suppose I have to do something with focus...but I can't seem to understand it properly - nor do I know if that is indeed the problem.
If you don't need the spacebar for your any button on the form, you can do an event.preventDefault() on keypress for the spacebar.
Related
I'm using ngx-chips to create a tag input for Angular 8. I got it all to work but I would like for my input to show the dropdown whenever I focus on the tag. Currently it only shows the dropdown when I focus on the input part, which is pretty small:
I want the dropdown to show when I click anywhere on the form, like this:
Is this behavior possible? I also noticed that pressing Enter can show the dropdown, but trying to trigger that behavior on click isn't really working out.
I tried altering the CSS itself by increasing the input width, but it looks and feels weird to use. So instead, I created a workaround with jQuery.
I just created a function for the component that uses ngx-chips, and used some jQuery inside that function
showDropdown() {
$('.ng2-tag-input__text-input').click();
}
Since the dropdown appears when focusing on the tag input field, what this snippet does is exactly that, but I used this function on an outer div, so that it would seem like when you click on the whole form, the dropdown would still appear.
Hope this would help someone else as well.
I'm trying to scrape my university's student website page for my grades and schedule.
I can login fine and I get to this point here but this dropdown is giving me so many issues. The way it works normally is the user selects an item in the dropdown, then presses a button next to it to submit.
Now, I've tried setting it by doing this:
document.getElementById(selectId).value = valueIWant
and
document.getElementById(selectId).selectedIndex = indexIWant
which both work, they change the value that is displayed in the select element, however, if I click the button next to it now, or call a click() on the button, it just resets to it's original value and doesn't load the page I want. But if I select the value with my mouse everything works fine... I don't get it, and I don't know what I'm doing wrong.
Has anyone come across something like this before? I appreciate any help you guys can provide :)
All I had to do was add a mySelect.onchange() before calling the button click.
Lets say the user focuses on an input, the keyboard pops up.
Then he clicks a button, that just shows a tooltip, not important and I would like the keyboard not to close.
I tried this:
var dontclosekeyboard = document.getElementById('dontclosekeyboard_element_Id');
Then in the the capture phase, meaning i put 3rd parameter to true I try to stop propagation. It sadly does not work.
dontclosekeyboard.addEventListener('click', function(e){e.stopPropagation() }, true);
I am out of ideas, is there any other solution apart from manually doing a '.focus()' on the currently active element?
I had the same problem a while ago showing info-buttons next to form elements. First of all: we finally decided to do that in another way, and work around it.
As soon as you lose focus on your input field the keyboard will be closed and even setting the focus back will cause the keyboard to toggle which is really annoying- with one exception: your tooltip button is also an input field just styled as a button. This way you can set the focus back to the original input without any side effects.
As per the title, is there a default focus and select behaviour following a JavaScript alert being clicked?
The reason I ask is that I have a JavaScript function validating an asp.net text box in a web forms application. I added a JavaScript alert to the function to help with debugging and the behaviour seemed to change. When I clicked on the OK button of the alert it then set the focus to the field I was validating and selected the text.
I thought it must be something in my code causing this behaviour so I commented out all the instances where I was setting focus and select, but still saw the same behaviour. As soon as I removed the alert it went back to behaving as expected and no longer selected the data in the text box.
Does this sound like it could be related to the JavaScript alert or just something odd going on in my code?
There is auto focus in html5, but the issue here seems like different. If the alert is a custom alert functionality try to remove that and add window.alert() function instead. These are wild guesses, it would e great if you can post your code block here?
Please see this: http://jsfiddle.net/uNbYu/1/
If you click submit, the button doesn't do anything, but simply hides the text box and only works the second time.
How can I find a way to fix this problem without removing the .hide() in the JS?? As I really need that.
Thanks
EDIT: The text box should be made hidden when the text input is clicked out of
The reason the button doesn't seem to do anything the first time you click it is because you aren't actually clicking it. The blur event on the input field fires first, causing the field to disappear. The result is that your click does not actually land on the button!
See this updated fiddle: http://jsfiddle.net/uNbYu/10/
In this example, I'm binding the hiding of the input field to the click of the submit button.
I'm not sure if this fully solves your problem. I'm not 100% sure of what you're trying to achieve, but hopefully this helps.
Your blur() function is actually being called when you click the button, which moves the button and missing the click event.
You can see this if you don't click the button, but instead click outside the form input, then click the button. It works.