Develop Reference

Stop dictation on iOS using JavaScript

I'm working on a chat app and I'm facing a weird problem with the dictation feature on iOS.
Here is the scenario:
The user focuses the input field and starts to dictate some text (using the native dictation offered by iOS)
Now they click the send button, which creates the chat messages, clears the text of the input and focuses the input again (to enable the user to write the next message right away).
But the dication doesn't seem to be stopped. When the user clicks the input field again, the text that has already been sent will re-appear and anything the user said in the meantime will also show up.
Does anyone know how to tell iOS to stop the dictation (preferably using JavaScript but a solution in Swift would also help).
Thanks!
Jesse
Minimal example:
const input = document.getElementById('input');
const button = document.getElementById('button');
button.addEventListener('click', () => {
input.value = '';
input.focus();
})
<input id="input"/>
<button id="button">Send</button>
<ul>
<li>Open this page on iOS</li>
<li>Focus the input and start dication</li>
<li>Click send => input is cleared</li>
<li>Click on the input => text is entered again :(</li>
</ul>
https://codepen.io/jjd/pen/vYZMGBy

I had the same situation recently and managed to replicate it on some chat demos around the web with the same issue, and after digging up for a while, I found old answers as well as explanations to why that occurs (and why some solutions fails).
The key here is that the iOS dictation ends when:
User lose focus of the input (taps elsewhere).
User taps on the Done button of the iOS keyboard.
While in theory tapping your Send button should remove the focus from the chat input and finish the dictation, in practice the sequence between losing input focus and reverting it is so quick that iOS doesn't bother to finish the dictation, as it recovers the focus right away anyways. And plus, adding some delay to allow the iOS keyboard to finish will end up hiding the keyboard, which could end up closing and opening many times as you send messages and handle the focus manually, which is not desirable.
If you look here, you can see a quick explanation of the subject, with a possible solution for your problem, I tested most solutions in that thread and they still works as for iOS 14. The idea that worked for me is to remove the focus on an element and focus on a similar element to avoid hiding the keyboard, and then revert it back manually, with the difference that it must be asynchronous to guarantee a proper response from iOS. The way I did it was to create a dummy text input and redirect the focus to that:
const dummy = document.createElement('input');
dummy.setAttribute('type', 'text');
dummy.style.position = 'absolute';
dummy.style.opacity = 0;
dummy.style.height = 0;
document.body.append(dummy);
dummy.focus();
Then, set an async timeout to redirect to the real input element, clear input, etc:
setTimeout(() => {
input.value = '';
input.focus();
dummy.remove(); //Notice this
}, 100);
Is hacky, but it gets the job done. I have no idea how other websites/applications handle this situation, as I only tested native applications instead of websites. Perhaps their clean code doesn't have this issue in the first place? 😛

How to display Find dialog in a WebView2 control?

I have got an old C++ MFC app upgraded to use the WebView2 web browser control, based on Edge. Otherwise I have got it working fine, one of the remaining issues is opening the Find dialog in it via the main MFC app Edit-Find menu item or via Ctrl+F (which is also intercepted by MFC framework). What I have now is:
m_webView->ExecuteScript(L"window.find(\"\", 0, 0, 0, 0, 0, 1);");
where m_webView is a pointer to ICoreWebView2 interface.
The problem is that sometimes it does bring up the Find dialog, sometimes not. Sometimes it does it after page refresh, sometimes not. When I close the Find dialog from cross, it typically refuses to open it again.
How can I make it behave properly? Maybe there is a way which does not need to go through Javascript?
Update: it appears it only worked if the Ctrl+F keystroke was somehow sent directly to the WebView2 control, bypassing MFC. It looks like the above Javascript line never worked. So maybe there is a way to simulate Ctrl+F for the WebView2 control?

AFAIK, WebView2 currently has no support for you invoking or otherwise controlling the find in page dialog. You can also refer to this thread. There is a similar thread in GitHub and the official hasn't given a solution.
You can use Ctrl+F keystroke directly in WebView2 control or provide feedback about this issue on WebView2 Feedback page. Thanks for your understanding.

As #yu-zhou answered, there is no official way yet to do what I wanted. For now I resorted back for emulating Ctrl+F programmatically for the WebView2 control, but the result ain't so pretty. For the record I still present it here:
First, the user has to click in the webview2 control at least once, so I can record its HWND in the GotFocus event handler registered by add_GotFocus():
void MyHtmlView::OnGotFocus() {
if (!m_webview2_hwnd) {
m_webview2_hwnd = ::GetFocus();
}
}
Now, when I want to bring up the Find bar programmatically, I need to ensure the correct window is focused and send it the Ctrl+F key. Alas, it appears the control checks the Ctrl key state in async way, so it gets a bit tricky, I need to alter the keyboard state for the thread and add an extra event handler for restoring it afterwards. After some trial and error I reached this (error checks omitted for brevity):
void MyHtmlView::Find() {
if (::GetFocus()!=m_webview2_hwnd) {
::SetFocus(m_webview2_hwnd);
}
std::uint8_t state[256];
::GetKeyboardState(state);
bool restoreCtrlState = false;
if ((state[VK_CONTROL] & 0x80)==0) {
// Ctrl key is currently not pressed.
// Mark it pressed.
state[VK_CONTROL] |= 0x80;
::SetKeyboardState(state);
restoreCtrlState = true;
}
std::thread auxThread([this, restoreCtrlState]() {
::SendMessage(m_webview2_hwnd, WM_KEYDOWN, 'F', 1);
::SendMessage(m_webview2_hwnd, WM_KEYUP, 'F', 1);
if (restoreCtrlState) {
::PostMessage(m_hWnd, WM_COMMAND, ID_RESTORE_CONTROL_STATE, 0);
}
});
auxThread.detach();
}
// This needs to be registered to handle ID_RESTORE_CONTROL_STATE
void HtmlView::OnRestoreCtrlState() {
std::uint8_t state[256];
::GetKeyboardState(state);
if ((state[VK_CONTROL] & 0x80)!=0) {
state[VK_CONTROL] &= ~0x80;
::SetKeyboardState(state);
}
}
Needless to say, this hack may easily cease to work if they change something in the webview2 implementation.

Flash Microphone Event Resize

I have been recently studying and learning Flash AC3 and my intention was to make a small voice recorder for my website. I have been using google and the search engines and get different answers here and there but still it is not exactly working properly.
The problem I am having is, the flash plugin is 215x50 pixels. I know that unless it is 215x138 pixels, the flash player security panel will automatically NOT open.
I devised a work around which is that if and when the security is being called to open, I would resize the DIV the flash object is in using a javascript function called ResizeFlash to a size of 215x138 and then back again to 215x50 after the user makes a choice whether or not they allow the microphone.
Now I have been scratching my head for a few days because I DO get the following code to work and it does resize the DIV, but it does not resize the DIV back. I think I might have the call to ResizeFlash in the wrong place (???). I am not familiar enough to know where it might be wrong.
I keep rearranging the code to see if that would work and I would get times where it does resize to 215x138, open the Security Panel, then resize back to 215x50 but then the recording would not begin, as if I were stuck somewhere in a loop.
I hope that someone can please take some time and just take a glance at this code and show me the right way to handle this. Thank you very much!
Here is the code:
public function Main():void
{
recButton.stop();
submitButton.enabled = false; // These reset everything, maybe in wrong place??
activity.stop();
addListeners();
mic = Microphone.getMicrophone();
if (mic == null)
{
// no camera is installed
}
else if (mic.muted)
{
// user has disabled the access in security settings
mic.addEventListener(StatusEvent.STATUS, onMicStatus, false, 0, true); // listen out for their new decision
Security.showSettings('2'); // show security settings window to allow them to change security settings
}
else
{
// you have access
mic.setUseEchoSuppression(true); //... also this might be in wrong place?
// .. I would like this to always be on
}
}
private function addListeners():void
{
recButton.addEventListener(MouseEvent.MOUSE_UP, startRecording);
submitButton.addEventListener(MouseEvent.MOUSE_UP, onSend);
recorder.addEventListener(RecordingEvent.RECORDING, recording);
recorder.addEventListener(Event.COMPLETE, recordComplete);
activity.addEventListener(Event.ENTER_FRAME, updateMeter);
}
function onMicStatus(event:StatusEvent):void
{
if (event.code == "Microphone.Unmuted")
{
mic.removeEventListener(StatusEvent.STATUS, onMicStatus);
ExternalInterface.call('ResizeFlash', '215', '50'); // When the user presses allow, resize the div back to 215x50
}
}
private function startRecording(e:MouseEvent):void
{
recorder.record();
e.target.gotoAndStop(2);
recButton.removeEventListener(MouseEvent.MOUSE_UP, startRecording);
recButton.addEventListener(MouseEvent.MOUSE_UP, stopRecording);
}
private function stopRecording(e:MouseEvent):void
{
recorder.stop();
e.target.gotoAndStop(1);
recButton.removeEventListener(MouseEvent.MOUSE_UP, stopRecording);
recButton.addEventListener(MouseEvent.MOUSE_UP, startRecording);
}
I know that I have something in there in the wrong order..! I appreciate any comments.

Resizing the app back to 215x50 in the Microphone's status event handler may be too soon, as you have suggested.
Just a hunch, but that status event is dispatched immediately when the user clicks the "Allow" radio button in the Flash security panel. The panel is still open. In fact, if you leave it open and click between allow/deny it will get dispatched each time...
When the security panel is up, there are some things you cannot do. I wonder if using ExternalInterface (to resize the app) is falling into this bucket.
I would suggest the following:
Test your resize functionality without the security panel in the mix. Make sure this code successfully resizes the app in both directions.
Then have a look at this question about how to detect when the user actually closes the security panel. There are two approaches there, one is very hacky (the BitmapData.draw() hack) but I know it works. I suggest trying the second one, and commenting/upvoting there if it does work (I will too). It's a more elegant way to detect when the user closes the dialog, but I haven't had a chance to try it.
When you detect the dialog is closed, resize the app.

How can I control the action of onbeforeunload in IE?

I've got a problem about onbeforeunload recently that I need to pop up a voting page when users try to close their IE browsers.I did it by using:
<body onbeforeunload="makevote()">
And the main structure of makevote() in javascript is as follows:
function makevote()
{
comet.distruct();
if(csid != null && isvote == null)
{
window.event.returnValue = false
window.event.returnValue='press “cancel” to vote please！'
showComDiv(popvote,"popiframe",400,120,'your vote here','dovote()');
}
}
In last three months this voting function performed so ugly that I got only less than 8,000 votes from more than 4,50,000 vistors.I think the problem is, when the users try to close their browsers,the onbeforeunload property pops up a comfirm box which covered my voting box while most users click the OK button,which means close comfirming is done,as a habit.So my question is how can I control the comfirming box made by onbeforeunload myself? For example if I click the "OK" ,I'll go to the voting box instead of closing my IE.So far what I can do is only defining the message it shows.And is there any other better way to do this?Help would be greatly appreciated!
Regards

Quite simply, you can't.
This is built-in behaviour, designed to only allow very minimal changes for security purposes. It's the same in every browser; FF, Chrome, etc, all will behave the same way.
The primary purpose for the beforeunload is for things like allowing the users the option to save changes before their changes are lost.
Besides, if your users are leaving, it's already too late - they won't want to answer a survey anymore, they're done!

showSettings callback in Flex?

I am pretty new to flex, so forgive me if this is an obvious question.
Is there a way to open the Security.showSettings (flash.system.Security) with a callback? or at least to detect if it is currently open or not?
My flex application is used for streaming audio, and is normally controlled by javascript, so I keep it hidden for normal use (via absolute positioning it off the page).
When I need microphone access I need to make the flash settings dialog visible, which works fine, I move it into view and open the dialog.
When the user closes it, I need to move it back off the screen so they don't see an empty flex app sitting there after they change their settings.
thanks :)

If you do something like this, it will work in some situations:
var mic:Microphone = Microphone.getMicrophone();
mic.addEventListener(StatusEvent.STATUS, onMicStatus);
If you are just trying to use the microphone and relying on Flash to pop up the dialog to ask the user for permission, Flash will open a dialog with two buttons, Allow and Deny. When the user clicks one of the buttons the StatusEvent will fire, the dialog will close, and you can move the flex app out of the way.
If you are manually opening the settings panel (via Security.showSettings), you get the panel with Allow and Deny radio buttons, and the event will fire when the user clicks on the radio buttons, not when they close the panel, which is probably of less help to you.

Update: flex 4 solution
So when I moved to the flex 4 and started compiling my mxml with adobe's open source mxmlc compiler, the solution below no longer worked because the alert doesn't lose focus when you're in the settings anymore.
As far as I could tell I had to move to a less elegant solution where the user must click "OK" on the alert box every time they are done with the settings.
Here is the new code:
private function setup_smart_hide():void {
// Call this function whenever you make the flex app visible (or add it
// to a show_flex() function if you have such a thing set up)
alert = Alert.show('Click "OK" to continue.', 'Thanks!', Alert.OK, null, function(e:CloseEvent):void {
// calls the external javascript to hide the flex app
hide_self();
});
}
OLD: (flex 3) Got this working...
private function setup_smart_hide():void {
alert = Alert.show('Thanks');
alert.addEventListener(FocusEvent.FOCUS_IN, function(event:FocusEvent):void {
// javascript to hide the flex app
ExternalInterface.call("SB.flex.hide");
});
alert.addEventListener(FocusEvent.FOCUS_OUT, function(event:FocusEvent):void {
// javascript to show the flex app
ExternalInterface.call("SB.flex.show");
});
alert.setFocus();
}
Which is run first thing in the init() function... the only problem is (like Wesley said), the focusOut event occurs when the flex app itself loses focus as well.