eframe web: ignore keyboard events unless canvas has focus (#4718)

* Fixes https://github.com/rerun-io/rerun/issues/6638
* Related? https://github.com/emilk/egui/issues/4563

This improves how an eframe canvas works inside of a larger web page,
and how it works when there are multiple eframe apps in the same page.

`eframe` will set `tabindex="0"` on the canvas automatically, making it
focusable.
It will also set `outline: none` on the CSS, so the focused canvas won't
have an ugly outline.


## Breaking changes
You may wanna add this to your `index.html` to give the canvas focus on
startup:
```js
document.getElementById("the_canvas_id").focus();
```

## Test setup
```sh
./scripts/build_demo_web.sh
./scripts/start_server.sh
open http://localhost:8888/multiple_apps.html
```
Then open the "Input Event History" and "Text Edit" windows

## Tested
* Chromium
	* [x] drag-and-drop of files
	* Test both when a `TextEdit` is focused and when it is not:
	  * [x] `Event::Key`
	  * [x] `Event::Text`
	  * [x] copy-cut-paste
	  * [x] Wheel scroll
	* [x] `Event::PointerGone`
	* [x] Mouse drag
	* [x] Mouse click
	* [x] Mouse right-click
	* [x] Defocus all eframe canvas, and then start typing text
* [x] Firefox (all of the above)
* [x] Desktop Safari (all of the above)
* [x] Mobile Safari


## Future work (pre-existing issues)
* https://github.com/emilk/egui/issues/4723
* https://github.com/emilk/egui/issues/4724
* https://github.com/emilk/egui/issues/4725
* https://github.com/emilk/egui/issues/4726

web_demo/multiple_apps.html

@@ -38,7 +38,7 @@
             margin: 8px;
             padding: 8px;
             width: 45%;
-            height: 98%;
+            height: 110%;
         }
 
         .centered {
@@ -94,7 +94,6 @@
         Stop one app
     </button>
 
-
     <canvas id="canvas_id_one"></canvas>
 
     <canvas id="canvas_id_two"></canvas>