SAPUI5 template
HTML
<!DOCTYPE html>
<title>SAPUI5</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>
<script id="myView" type="ui5/xmlview">
<mvc:View controllerName="MyController"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns:f="sap.ui.layout.form">
<Shell>
<f:SimpleForm editable="true"
layout="ResponsiveGridLayout"
labelSpanXL="4"
labelSpanL="3"
labelSpanM="4"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="0"
emptySpanL="4"
emptySpanM="0"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false">
<Label text="Your power level"/>
<Input value="{path: 'data>/power', type: 'sap.ui.model.type.Integer', constraints:{minimum:0}}"
type="Number"
liveChange="numericFilter"
description="kW"/>
</f:SimpleForm>
</Shell>
</mvc:View>
</script>
<body class="sapUiBody">
<div id="content"></div>
</body>
JavaScript
sap.ui.getCore().attachInit(function() {
"use strict";
sap.ui.controller("MyController", {
onInit: function() {
var oViewModel = new sap.ui.model.json.JSONModel({ power: "9001" });
this.getView().setModel(oViewModel, "data");
},
numericFilter: function(oEvent) {
var sValue = oEvent.getSource().getValue();
console.log(sValue);
var sValueNumeric = sValue.replace(/\D/g, "");
oEvent.getSource().setValue(sValueNumeric);
}
});
sap.ui.xmlview({
viewContent: jQuery("#myView").html()
}).placeAt("content");
});