How can I prevent formula touch event in MathJax? e.g. when I touch or click a formula rendered by MathJax It is gone to surround by a blue border as a response that it is touched.
This is an Example form MathJax test folder.
I have already set showMathMenu: false but I am unable to prevent this.
The outline is part of the standard browser interface for focusable items on the page. In version 2.6, MathJax added support for users using assistive technology, and that included making the MathJax menu accessible to keyboard users and those with screen readers. In order for that to work, the math expressions need to be able to accept the browser focus (so that keystrokes will be targeted to them, so the menu can be opened).
The outlines you are seeing are the focus highlighting that is the default styling for focused items in the browser (the actual effect differs between browsers, but all browsers should provide some form of visual indication for the focused item). Without that, keyboard users will not be able to know when and which math expressions are selected for keyboard focus. Removing that would make it harder (or impossible) for those users to properly interact with MathJax and its menus.
While you certainly could add CSS to your page to remove the outlines, it would be a mistake to do so, unless you have no concern for those users who require assistive technology to support their reading of your pages. You should note that all focusable elements should get these outlines (buttons, menus, input areas, etc.) when you click on them. For example, the editor I'm typing into right now has a blue outline indicating that it currently has the keyboard focus. This is part of the standard interface for focusable items, and is not something you should try to disable.
Related
I am working on an advanced search feature for a web project in React using the Algolia React Instant search package.
I am struggling a bit with keyboard navigation.
The search result features a long list of articles with various URLs. The list is very cumbersome to navigate only with the tab-key, so I have implemented navigation with the arrow-keys that works really great.
However, I have stumbled upon an issue I am unsure how to solve regarding focus-visible. When navigating with arrow keys a function inside the component will set focus using element.focus();
If I focus the search field with the mouse and start navigating with the arrow keys the focus-visible outline is missing. However, if I navigate to the search field with the tab key and start navigating with the arrow keys the focus-visible outline is visible.
This is according to specs, as focus() will not change to focus-visible and the last navigation was done with the mouse.
But this makes it impossible to navigate with the keys - you have no idea what element is in focus. Any idea how to force the browser into thinking that I am navigating with the keyboard when setting focus programmatically?
I ended up rethinking my styling and using a focus style.
But the behavior in Chrome is really weird.
If I set a style like focus:not(:focus-visible) it will be styled with the focus style when navigating with the mouse on focus, but not if I set focus with Element.focus() (and the focus was initially set on the active element with the mouse);
So the Chrome browser knows this was not navigated by a mouse? This makes absolutely no sense to me?
I'm developing a (desktop) application in Electron (v1.6.2) that has a <webview> element (hosting 'guest' web pages) and a number of text fields, both <textarea> and <input type="text">.
We would like the user to be able to select text within the guest page inside the WebView and drag-and-drop it into the application's fields -- but, this isn't working.
Without doing anything special, I can select text in the guest page and drag-and-drop it into other applications outside of Electron.
E.g. -
Dropping it into a text editor, a text-field in a web-browser or my terminal window works fine.
It even works dropping it into a field in a different instance of my Electron application.
I can also drag text that is in the application, but not inside the WebView, and drop that in the fields Ok.
However, when dragging the text selected in the WebView, the fields in the application are not sensitive to events -- i.e. they receive no dragover or drop events, and focus does not switch to them as you would expect.
I've tried adding event handlers to the <webview> to intercept the mouse events (mosedown, mousemove, mouseup) in order to manually control things and tried to use event.preventDefault = true to disable the events from passing down to the guest page.
Everything behaves as I would expect util the moment when it is recognised that you are dragging text. Visually, this is the moment when the pointer switches to a closed fist and a ghostly rectangle appears showing the selected text. At that moment all mouse events cease to be received by the <webview> event handlers. It seems that the application is 'frozen' when text is being dragged.
Is there anything I can do about this?
It would work either to: -
- prevent the WebView from actually dragging text, and for me to simulate it programmatically;
- or to find a way to 'unfreeze' the application during the text-dragging, so that the fields are active, can see events and can receive dropped text.
This is a bug present in Electron v1.6.2.
It is fixed in Electron v1.6.5, released at the end of March 2017.
I've now updated to the latest stable release, v1.6.11, and the issue is fixed.
Right Click, inspect element allows me to see corresponding html & css to screen element. Does the browser likewise, permit tracing the javascript function to corresponding clicks? Or do you manually need to trace from onclick event, so on and so forth?
If so, can one likewise, perform editing of the Javascript, in a browser to verify, what changes will it bring about? Much like, what we can do for html & css
On Google Chrome i discover, in Elements on the right side screen, one can browse to Event Listners then click event to see some Javascript. I'm still deciphering it to see if it permits simultaneous browser screen manipulation.
It doesn't seem to be working at the moment.
MobileSafari as a rule has incorrect HTML button behavior (incorrect meaning: "not like an iOS native button"). Correct button behavior is as follows:
User touches button: Button highlights
User drags finger out of button: Button dims
User drags finger back into button: Button highlights
User drags finger out of button and releases: Button does not click
MobileSafari buttons highlight when you touch them, stay highlighted no matter where you move, and click no matter where you release them (unless the view scrolls, in which case the touch is always canceled, even if you re-enter the button).
This problem applies to all clickable things such as links (when -webkit-touch-callout is set to none). I have only found one web application so far that has correct button behavior: Facebook. Looking at their code for it, it looks like they've done quite a lot of jumping-through-hoops to make it work correctly (tracking all the mouse events manually and not using buttons at all). The code is dense, uses Javelin, and I'm not yet clear on all the pieces required to make it work.
I know I'm somewhat kidding myself (since if it were easy, everyone would do it), but I'm going to ask anyway. Is there any generally-available piece of code that handles this feature? Is there a simpler solution than reverse engineering Javelin, even if it is only applicable to WebKit? (Javelin isn't very-well suited to my lightweight needs.) My ultimate goal is correct button behavior for a UIWebView embedded in a native app, so hybrid JavaScript/ObjC solutions are acceptable as well (though no hybrid approaches come to mind).
Basically what you'd want to do is build out some sort of hybrid hover functionality for touch devices, which detects when your finger moves in/out of the button in question.
I built a basic JSFiddle which implements some barebones functionality. If you know any javascript, I think you'll get the idea.
Live JSFiddle DEMO
Try it on your iOS device (and maybe your Android device??).
-
brian
The scenario, I have an input text field I'm doing partial auto-complete on (exactly like the Tags input field on Stack Overflow... because that's what is, basically).
As a user is typing, I suggest things they may typing; the user then clicks one the suggestions, it replaces a bit of the fields content, and places the cursor after where the insert occurred.
All this works, but after the insertion the software keyboard isn't shown anymore. You can replicate this on the desktop Stack Overflow site.
The code on SO isn't exactly the same, though the symptom is.
Here's the actual code called after the text is inserted into the text field.
$(field).focus()[0].setSelectionRange(newCaretPos, newCaretPos);
(Yes yes, setSelectionRange is non-standard; but it works on all the mobile devices I care about just this moment, so ignore it for now)
On android, iphone, etc. this works fine (the keyboard "flickers" but I'm willing to live with it.
So, the question basically boils down to: How can I force the onscreen keyboard to appear on Windows Phone 7 (Mango update)?
Sorry, there is no guaranteed way to force the SIP to display in WP7. :(
Normally setting the focus on the textbox would force the keyboard. Have you tried just setting the focus? (i.e. not setting the selection range)