window.confirm disappears without interaction in Chrome - javascript

I have an ASP button that when clicked brings up a window.confirm. This window.confirm disappears without user interaction. However, if I keep clicking the ASP button, after about the 4th or 5th click the window.confirm box will work as expected.
A couple of things that I also noticed, after hours of working on it, if I remove the Text property from the ASP button, the window.confirm works as it should.
This made me think, "Hmmmm... let me look at the <input> button that is behind the scenes of the ASP button, and I noticed that if I remove the value from the input the window.confirm works, but if I put a value in the input, the window.confirm stops working again.
Does anyone know what may cause this? Is there a work around to putting text in the button without using the Text property? I haven't tried innerHTML yet because I wanted to see if there is anything else I can do before I do that.
Btw, I tried using OnClientClick, instead of OnClick and I get the same results.
Here is the code that I have for the button:
<asp:Button ID="btSubmit" runat="server" Text ="Submit Email" OnClick="btSubmit_Click" OnClientClick="return confirm('Test');"/>

I've just faced the same issue.
As investigating the problem I've found out that the code itself is ok, but after puting it in the context of the website - starts failing as described above.
The problem seems to be the facebook tracking code called through GTM.
If I remove the whole Google Tag manager code from the header - everything just works fine
Although it's not the sollution yet, so I'll need some deeper GTM investigation to prevent this behaviour. But this also might help you...

Related

HTML Input only works at front of input field

I have a web page with an odd behavior on part of it.
On most of the page, the input tags work just the way one would expect.
Here's an input tag I put in to test:
<input name="vanilla1" value="vanilla" />
In one part of the page, I can click on the field to edit it, but only at the front of the field. So, if the input tag had a value of "vanilla", I could click in front of the "v" and start typing or deleting. But it won't let me click between the two "l" characters and start typing.
It's not easy to just post a full working sample, I would have to retype by hand a lot of code.
If I wanted to get that behavior I don't have a clue of how to do it.
Any ideas of what to look for that might cause this?
It's obviously not disabled or readonly because I can edit it.
When I inspect the problem input tags in the IE DOM explorer, they don't look any different from the input tags that work as expected.
There's javascript, html, angularJS and dojo, plus the esri gis api css libraries in the technical mix.
A few more observations:
In IE, when I click on a working input tag that already has a value in it, I get a little X show up on the far right of the input box. If I click on the X the field is blanked out. On my problem input tags, when I click on them, I get the X but clicking the X does not work. So I appear to be accessing the right object.
When I inspect the object, everything looks normal. No javascript events attached, it's not read only or disabled.
Isn't it like covered by another node or something like that?
Did you check it in all browsers or only in IE?
Try to open Chrome DevTools and click the "Select an element in the page to inspect it" (top left corner of the DevTools window, CTRL + Shift + C shortcut on Windows) and hover over that input. See if there's possibly any element that may cover it. If there's - voila! Remove that overlay and you're good to go. If not - I don't have any ideas for now.

focus() method doesn't work while manually focusing with the mouse or tab key does

I try to focus an element of an email field in this webpage, with the following code:
document.querySelector("#user_email").focus();
While manual focusing with either clicking on the field with the mouse or using tab works, the focus() method fails to create the focus, as it seems both from the fact the CSS doesn't change, and the console returns "undefined".
As a newcomer, I ask why?
When you're calling focus() from console, focusing won't happen immediately - you have to go back to the site (close console). When you go back from console to a website by clicking on a website, focusing won't happen. Close console using shortcuts or use setTimeout to delay focusing to give you time to go back to the website.
Digital Ocean's input boxes are focusing fine for me. The undefined basically means that nothing is returned from your expression. For example if you type var a = 123 it'll still say undefined. Also there is no special CSS styling on these input boxes. You might be getting confused with the ones in their control panel.
UPDATE: OP was getting confused with Chromes default input styling.
You should try with document.getElementById('user_email').
document.getElementById('user_email').focus() ;
<input id="user_email">

Is there a default focus and select behaviour following a JavaScript alert being clicked?

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?

CKEditor dont work in PopUp-window

I use CKEditor and bPopUp jQuery plugin, if i set CKEditor just in html, without other scripts it work fine, but when i try set it into popuped window they stop working, i see just CKEditor but cant do anything, cant click for typing text, when click on buttons get errors in console. Mby somebody know is it real to fix ? I have an example here: http://kxc.lv/CKEditor_problem/
How you see, it's correctly work without popup, on start, but if click on "click me" you get popup with buggy CKEditor, and it's not cause i have two textarea with same id on a page, if i rempove first textarea without popup, it;s still dont work.
Mby somebody can help me please ?
In your DOM, all of your id="" must be unique. Change the second to id="editor2" and you should be fine.

do not highlight input value when tabbing over

This is a 2 part question:
1)
click on one of the demo dropdowns on this page. when you tab over to the next input, the text is selected/highlighted in firefox. how can i prevent this from happening?
2) bonus: can you review my code that is hosted on google and tell me what i can improve?
Well, that is just default behavior on Firefox. A possible workaround is to have the input fields execute a JavaScript or jQuery function on select, have the function blur the field (which would deselect the text) and then refocus on the field. Very basic and I'm sure it'd need a couple extra hacks. Unfortunately without scripting, no there is nothing you can do to prevent that.
I honestly recommend that you leave it alone. That functionality was put in place so you wouldn't have to use your mouse when typing into forms, hitting tab would select all the text so you can easily retype it or hit the right arrow key to go to the end of the field. Removing the functionality will only irritate some of your visitors. If they're using the tab key to get to the next field, they probably want that functionality.

Categories