<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script>
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel",
"my/demo/control/Input"
], (XMLView, JSONModel) => {
"use strict";
return XMLView.create({
definition: `<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns:my="my.demo.control"
xmlns="sap.m"
displayBlock="true"
>
<App>
<Page showHeader="false">
<Table keyboardMode="Edit">
<columns>
<Column>
<Text text="Edit Mode" />
</Column>
</columns>
<ColumnListItem>
<my:Input value="{/value}" />
</ColumnListItem>
<ColumnListItem>
<my:Input editable="false" value="{/value}" />
</ColumnListItem>
<ColumnListItem>
<my:Input
type="Number"
value="1234"
fieldWidth="7rem"
textAlign="End"
description="Works also with type="Number""
/>
</ColumnListItem>
</Table>
</Page>
</App>
</mvc:View>`,
height: "100%",
models: new JSONModel({
value: "Select text on focus"
}),
}).then(view => view.placeAt("content"));
});
</script>
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/2/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified"
data-sap-ui-resourceRoots='{ "my.demo": "./" }'
data-sap-ui-async="true"
data-sap-ui-onInit="onUI5Init"
data-sap-ui-compatVersion="edge"
data-sap-ui-excludeJQueryCompat="true"
></script>
</head>
<body id="content" class="sapUiBody"></body>
</html>
sap.ui.define([
"sap/m/Input",
"sap/m/InputRenderer", // preload renderer to avoid sync XHR
], (Input, InputRenderer) => {
"use strict";
return Input.extend("my.demo.control.Input", {
onfocusin: function() {
if (typeof Input.prototype.onfocusin == "function") {
Input.prototype.onfocusin.apply(this, arguments);
}
this.getDomRef("inner").select(); // ... instead of `this.selectText(iStart, iEnd)` which doesn't support input elements with `type="number"`. See https://html.spec.whatwg.org/multipage/input.html#input-type-attr-summary
},
renderer: InputRenderer,
});
});