I'm working on a Google Chrome extension, and using for a search box, the search displays results in an inline div rather than having a submit button and going off to a different page when it is clicked.
Is there any way to detect when the "X" button is pressed at the end of the search field, i need to close the inline div when it is but I don't know how to detect if its been pressed.
I believe there isn't a way to do that. But if you can listen on the search event, that occurs when the user presses the ENTER key or clicks on the "X" button.
If you want to see if you clicked on the "x" maybe this hack is good enough? Figure out if the contents is empty. (sure this will be true if you press "enter" on empty text"
search.addEventListener('search', function(e) {
console.debug(search.value.length == 0)
}, false);
Related
I am not sure if this is exactly what I need, so I'll explain my situation
I am using CSS to show a popup window by using the :target state to set the visibility and opacity of it correctly.
On the popup I have an X that sets a new empty target when clicked, this closes the popup as it is not the target anymore.
This is my X link:
<a href="#" className="project-form__close">
✖
</a>
My problem is this - the popup is actually a form, and I'd like it to close automatically when the form submits, without the user actually having to click anything.
How can I do that? I'm not actually navigating anywhere.
Two choices:
Call the .click() method on the link, to simulate a click
Just do window.location.hash = ''; to perform the same effect directly
I have this annoying popup where it only displays the number 1. tried to search it manually in the system but there is too much others ones. is there a way where i could inspect a popup?
on your web page click on view page source by clicking on mouse right click or by ctrl+u with keyboard shortcode.
and then find:
alert(
and comment all alert box into your code.
Get id of that alert and search it manually. To get id, follow the image boxes or press CTRL+Shift+C and press ok. You will find function call in element section. go to the function and get your alert box.
I have a Button on my windows phone application. I have the Command Button binds to my RelayCommand in my ViewModel:
<Button Command="{Binding DoSomethingCommand}" CommandParameter="aString"/>
I see DoSomethingCommand get invoked correctly when I press the Button.
But when the keyboard is launched, I need to click the button twice before I see the DoSomethingCommand get invoked. The first click causes the keyboard to close, the second click invokes DoSomethingCommand.
Can you please tell me why there is a change in behaviors when the keyboard is open or not?
I came across the same issue today.
To explain it a bit better: a text box is focused, the keyboard is visible and a button is below the text box. Tapping this button the first time, unfocuses the text box and closes the keyboard. Tapping the button a second time, triggers the tapped event.
To solve this, I set MyTextBox.IsEnabled to false and then back to true in the next line. Setting it to false, unfocuses it. Setting it to true again, makes it usable again. The user won't notice, the keyboard closes and the button is tappable the first time.
Alternatively, one can set the focus to the button after leaving text box focus.
Anyone with firefox browser can you open up this fiddle.
The issue I have is with this checkbox button I have, it requires multiple clicks to turn it off and my question is how can I stop this from happening? I know its the posistion:relative which is causing this but I need this so that every time I click on a button, it does not go to the top of the page. I just want the button to turn on and off in one click, not multiple clicks
(See comments below the question - now I know what happens to you)
Ahhh - you cannot solve this without Javascript: quick (double?) click on the TEXT ITSELF is interpreted as "select text" by the browser, and it does not send the event to the checkbox when that happens. With Javascript you can force "un-select" of the text on click.
Click "slowly" - avoiding double click text selection - and it will work (just to show the cause of the problem, no solution without Javascript or proprietary CSS).
Try adding this: Prevent text selection after double click
Maybe you should use a full Javascript Checkbox-Button solution instead of trying to accomplish it with just CSS.
This is related to How is the default submit button on an HTML form determined?
In my web app's design the user should be able to directly submit the form by pressing enter in a text input, in which case, none of the buttons in that form should be submitted as they have other functions. To avoid the default button problem, I handles the keydown event and submitted the form programmatically.
When I tested this in Firefox, it seems the first button in the form is pressed on the enter key. The simple solution is to disable that button in the keydown event handler.
Chrome, however, seems to 'intelligently' choose the first non-disabled button as the default button and will submit using that button even if that button will be immediately disabled by the keydown handler.
The effect can be tested using this jsFiddle. In Firefox, after the "first" button has been disabled by the checkbox, enter press in the input will only cause one submit. In Chrome, there will always be two submits, one from keydown and the other from button press, even after both buttons have been disabled!
This forces me to either change all keydown handlers in my code to return false or handle all button clicks and check if the button is disabled. Neither seems to be good code.
Any better suggestions?
May be you can hook it on blur. Try this:
<input type="text" ... onblur="submit();" />