Disabling/customizing touch-related input UI in Chrome Kiosk-mode - javascript

I am currently working on a kiosk-ish project on Windows platform, where the user should fill in their contact info. I’ve used the input element with the custom on-screen keyboard, so I don’t need OS-level stuff, but the only problem left is native Chrome UI for interaction with inputs like “tear” cursor and context menu for text-editing actions (copy, paste, etc). I have two questions:
can I customize the color of this “tear” cursor?
can I hide this context menu?
I’ve already made event.preventDefault() with “contextmenu” event аnd used these flags with Chrome shortcut:
--chrome --fullscreen --disable-pinch --overscroll-history-navigation=0 --no-context-menu --kiosk …
Thanks in advance!

You can make the text un selectable so that the user can not click on it for a word selection and so the tear cursor will also not appear with the context menu
Till it is editable the tear cursor ui and functionality is from the native side of the phone which can't be changed.
For hiding the context menu make the input text selection to disable which may be an option but we can't disable selection in an input. Try with custom input

Related

Building WYSIWYG in React, difficulty restoring selection range and creating link

I'm building a simple WYSIWYG editor in React and I've implemented all of the different button functionalities except this last one: selecting text and turning it into a hyperlink.
I need to preface this with: I'm not interested in answers like "just use React-Quill" or "just use react-draft-wysiwyg".
So the type of feature I'm trying to implement can be seen on https://quilljs.com/ - scroll down until you see the demo editor, then select some text, click the "link" button, and a secondary window will pop up containing a text input that allows you to enter a URL. Click SAVE, and the originally selected text will turn into a hyperlink.
I'm approaching this like so:
Using document.execCommand('createLink', false, myURL) to handle the actual hyperlink creation
When my url entry window pops up, I save the currently selected range by saving off the result of document.getSelection().getRangeAt(0)
When the SAVE button is clicked, I restore the range by grabbing the document selection again, clearing all ranges with sel.removeAllRanges() and then calling sel.addRange(mySavedRange)
Note: all of this range saving and restoring is necessary, because when the user clicks on the text input on the pop-up window to enter a url, the document selection clears.
So here's what I'm seeing happen:
Instead of the selected text turning into a hyperlink (in this case I was selecting the word 'this',) the url is just thrown at the end of the line of text.
For reference, after trying my own code, I decided to try the functions implemented here: https://gist.github.com/dantaex/543e721be845c18d2f92652c0ebe06aa
I still see the same issue.
Any thoughts?
An extra note: I'm building an electron app, so I'm not as concerned with "cross-browser" compatibility. If it works in Chrome, then great!
My solution: the issue was that the contenteditable div needed to be focused.
So I changed my approach:
Upon clicking "Save", instead of using the document.execCommand right away, I would update a global state field, like enteredHyperlinkText (I'm using Reactn)
I added a ref to my editor with useRef and an effect to my editor with useEffect (I'm using React Hooks) the effect would only re-run when enteredHyperlinkText updates, and it will handle focusing on the editor, restoring the selection, and calling document.execCommand.
Note: focus the contenteditable div before restoring the selection.

Search in MegaMenu Popup

My company has a MegaMenu on their internal web portal. One of the popup menus has a Search input field which works fine. The problem is that when someone types in the input field and the mouse pointer moves off of the megamenu it, of course, disappears. I need to keep that popup menu open/visible while the user enters the search parameters. Whatever they typed is also invisible until they mouse over the menu item again. Also I am not sure if I should look at onfocus attribute, cursor positioning or a mousemove event.
You need to opt for show/hide on click rather than toggle on hover. So that unless user does not wish to make that hide it is open. As it is convenient for users.

How to automate select a text (click and hold mouse) using Javascript and JQuery provide my framework is in Java?

My application has a feature where in the user selects a piece on text by clicking and holding mouse on a a reader page, releasing the mouse later shows a menu to user where he select Highligh option. Text select is highlighted in this way. Can you please help on how to automate this using selenium(java)
The selenium Actions class allows you to build complex interactions.
https://github.com/SeleniumHQ/selenium/blob/master/java/client/src/org/openqa/selenium/interactions/Actions.java
For example, you might do:
driver.clickAndHold().perform();
to simulate the user clicking (without releasing) the mouse at the current location.

Solution to disable default select option open behavior on "NEXT" virtual button of iOS keyboard?

I have developed hybrid application with Cordova (PhoneGap/ HTML / jQuery/ CSS) on iOS platoform and I am facing application crash issue on one scenario.
In the page I have mentioned three select elements in a sequence along with few inputs. When I focus on first input element of form and used "NEXT" button of virtual keyboard to move next element it work fine till it come to first select option. Once first select option get focus by "NEXT" button event it open up its option window. if I do not wait on first select option and press "NEXT" button then my application get crashed. I have tried multiple option to fixed this issue like below:
1) keeping all options disable till user click on its parent div. but event does not work on disable select option. However it work on other area like its associated label.
2) keeping hidden input next to select option with tabindex=1
I searched lot but didn't find any proper solution. Searched to disable NEXT button focus event on select option to remove default behavior of select option on iOS.
Does anyone have idea to fix this issue? Do we have any safari/iOS base attribute to disable default behavior OR any jquery/ javascript solution?
Best Regards,
Jeet

how to avoid the keyboard obstructing buttons

Hi all I have a window with two text fields and two buttons.When I'm on the second text field, the keyboard is in the way of the buttons. And thus, there is no way to press the buttons. I need to turn the device sideways and a 'done button' appears in my text field which, if clicked, will remove the keyboard. But in the future, I will be locking my app to portrait so I'm just wondering how to solve this issue. Is there a specific keyboard I can call which will have a button to remove the keyboard or anything like that? I'm working with titanium
As suggested, in comments above.
By placing the View inside a ScrollView will allow you to achieve this result. Then when the keyboard is shown for that view you can have the textfield scroll up so it is not covered by the keyboard. Follow this example shown here:
How to make a UITextField move up when keyboard is present?
If you don't want to use a scroll view, or want more control over the 'avoiding', use IHKeyboardAvoiding https://github.com/IdleHandsApps/IHKeyboardAvoiding
(its mine)

Categories

Resources