【SAP UI5 控件学习】DAY03 Input组Part III

news2024/11/27 13:35:55

1. Input 控件

1.1 最简单的Input控件

在UI5框架中，最简单的Input控件也提供了输入提示功能。当用户输入内容的时候，会自动匹配Input控件中所绑定的JSON模型中是数据。

在这里插入图片描述

Input的默认匹配规则是匹配从头匹配每一个单词

前端代码如下：

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
>
	<l:VerticalLayout class="sapUiContentPadding" width="100%">
		<Label text="Product" labelFor="productInput" />
		<Input
			id="productInput"
			placeholder="Enter product"
			showSuggestion="true"
			showValueHelp="true"
			valueHelpRequest=".onValueHelpRequest"
			suggestionItems="{/ProductCollection}">
			<suggestionItems>
				<core:Item text="{Name}" />
			</suggestionItems>
		</Input>
	</l:VerticalLayout>
</mvc:View>

如果不需要弹出ValueHelper的对话框，showValueHelp="true"可以设置为false，同样可以提供自动提示功能。

如果需要设置弹出ValueHelper，需要设置为true，同时需要创建一个Fragment，作为弹出对话框的前端代码。

<c:FragmentDefinition
	xmlns="sap.m"
	xmlns:c="sap.ui.core"
>
	<SelectDialog
		id="selectDialog"
		title="Products"
		items="{/ProductCollection}"
		search=".onValueHelpSearch"
		confirm=".onValueHelpClose"
		cancel=".onValueHelpClose"
	>
		<StandardListItem
			icon="{ProductPicUrl}"
			iconDensityAware="false"
			iconInset="false"
			title="{Name}"
			description="{ProductId}"
		/>
	</SelectDialog>
</c:FragmentDefinition>

js代码如下:

sap.ui.define([
	'sap/ui/core/mvc/Controller',
	'sap/ui/model/json/JSONModel',
	"sap/ui/core/Core",
	"sap/ui/core/library",
	"sap/ui/unified/DateTypeRange",
	"sap/ui/core/date/UI5Date",
	'sap/m/MessageToast',
	"sap/ui/core/Fragment",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator"
], function (Controller,
	JSONModel,
	Core,
	library,
	DateTypeRange,
	UI5Date,
	MessageToast,
	Fragment,
	Filter,
	FilterOperator) {
	"use strict";

	return Controller.extend("sap.ui5.walkthrough.controller.App", {
		/**
		 * @override
		 */
		onInit: function() {
			var oModel = new JSONModel({
				ProductCollection : [
					{Name : "Mac mini", ProductId : "001"},
					{Name : "Mac Pro", ProductId : "002"},
					{Name : "Macbook", ProductId : "003"},
					{Name : "Macbook Pro", ProductId : "004"},
				]
			});
			this.getView().setModel(oModel);
		},

		// 打开对话框
		onValueHelpRequest: function (oEvent) {
			var sInputValue = oEvent.getSource().getValue(),
				oView = this.getView();

			// 如果对话框没有弹出，则创建
			if (!this._pValueHelpDialog) {
				this._pValueHelpDialog = Fragment.load({
					id: oView.getId(),
					name: "sap.ui5.walkthrough.view.ValueHelpDialog",
					controller: this
				}).then(function (oDialog) {
					oView.addDependent(oDialog);
					return oDialog;
				});
			}
			this._pValueHelpDialog.then(function(oDialog) {
				// Create a filter for the binding
				// 这句话的作用是设置弹出对话框的过滤器，比如我在输入框中已经输入了mini，那么再点击ValueHelper
				oDialog.getBinding("items").filter([new Filter("Name", FilterOperator.Contains, sInputValue)]);
				// Open ValueHelpDialog filtered by the input's value
				oDialog.open(sInputValue);
			});
		},

		onValueHelpSearch: function (oEvent) {
			var sValue = oEvent.getParameter("value");
			var oFilter = new Filter("Name", FilterOperator.Contains, sValue);

			oEvent.getSource().getBinding("items").filter([oFilter]);
		},

		onValueHelpClose: function (oEvent) {
			var oSelectedItem = oEvent.getParameter("selectedItem");
			oEvent.getSource().getBinding("items").filter([]);

			if (!oSelectedItem) {
				return;
			}

			this.byId("productInput").setValue(oSelectedItem.getTitle());
		}
	});
});

1.2 显示两类内容的Input

只需要添加additionalText="{SupplierName}"即可

在这里插入图片描述

注意，之前使用的item是<core:Item text="{Name}" />，这个item不提供additionalText属性
在这里插入图片描述
如果我们要使用该属性，需要将item换成<core:ListItem text="{Name}" additionalText="{ProductId}" />

1.3 显示表格输入提示的Input控件

可以同时显示一个item的多个属性，如下图所示：
在这里插入图片描述
具体代码如下：

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
>
	<l:VerticalLayout class="sapUiContentPadding" width="100%">
		<Label text="Product" labelFor="productInput" />
		<Input
			id="productInput"
			placeholder="Enter product"
			showSuggestion="true"
			showTableSuggestionValueHelp="false"
			suggestionRows="{/ProductCollection}">
			<suggestionColumns>
				<Column>
					<Label text="Brand"/>
				</Column>
				<Column>
					<Label text="Category"/>
				</Column>
				<Column>
					<Label text="Name"/>
				</Column>
				<Column>
					<Label text="ProductId"/>
				</Column>
			</suggestionColumns>

			<suggestionRows>
				<ColumnListItem>
					<Label text="{Brand}"></Label>
					<Label text="{Category}"></Label>
					<Label text="{Name}"></Label>
					<Label text="{ProductId}"></Label>
				</ColumnListItem>
			</suggestionRows>
		</Input>
	</l:VerticalLayout>
</mvc:View>

需要注意的是，之前提示的suggestion都是使用的suggestionItems="{/ProductCollection}">属性。
如果使用表格的方式，那么需要修改为suggestionRows="{/ProductCollection}"

sap.ui.define([
	'sap/ui/core/mvc/Controller',
	'sap/ui/model/json/JSONModel',
	"sap/ui/core/Core",
	"sap/ui/core/library",
	"sap/ui/unified/DateTypeRange",
	"sap/ui/core/date/UI5Date",
	'sap/m/MessageToast',
	"sap/ui/core/Fragment",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator"
], function (Controller,
	JSONModel,
	Core,
	library,
	DateTypeRange,
	UI5Date,
	MessageToast,
	Fragment,
	Filter,
	FilterOperator) {
	"use strict";

	return Controller.extend("sap.ui5.walkthrough.controller.App", {
		/**
		 * @override
		 */
		onInit: function() {
			var oModel = new JSONModel({
				ProductCollection : [
					{Brand: "Apple Inc.", Category: "Personal Computer", Name : "Mac mini",  ProductId : "001"},
					{Brand: "Apple Inc.", Category: "Personal Computer", Name : "Mac Pro", ProductId : "002"},
					{Brand: "Apple Inc.", Category: "Personal Computer", Name : "Macbook", ProductId : "003"},
					{Brand: "Apple Inc.", Category: "Personal Computer", Name : "Macbook Pro", ProductId : "004"},
				]
			});
			this.getView().setModel(oModel);
		},
	});
});

1.4 带有输入验证的Input

在输入某些值的时候，可以设置相关的验证规则，比如长度的限制，包括格式的限制。下面的例子展示的是两个输入框，一个要求长度在1-10，另一个要求必须符合电子邮件的格式。具体代码如下：
在这里插入图片描述

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
>
	<l:VerticalLayout
		class="sapUiContentPadding"
		width="100%"
	>
		<Label
			text="Name"
			labelFor="nameInput"
		/>
		<Input
			id="nameInput"
			class="sapUiSmallMarginBottom"
			placeholder="Enter name"
			valueStateText="Name must not be empty. Maximum 10 characters."
			value="{
				path: '/name',
				type: 'sap.ui.model.type.String',
				constraints: {
					minLength: 1,
					maxLength: 10
				}
			}"
		/>
		<Label
			text="E-mail"
			labelFor="emailInput"
		/>
		<Input
			id="emailInput"
			class="sapUiSmallMarginBottom"
			type="Email"
			placeholder="Enter email"
			valueStateText="E-mail must be a valid email address."
			value="{
				path: '/email',
				type: '.customEMailType'
			}"
		/>

		<Button text="submit" press=".onSubmit"/>
	</l:VerticalLayout>
</mvc:View>

sap.ui.define([
	'sap/ui/core/mvc/Controller',
	'sap/ui/model/json/JSONModel',
	"sap/ui/core/Core",
	"sap/ui/core/library",
	"sap/ui/unified/DateTypeRange",
	"sap/ui/core/date/UI5Date",
	'sap/m/MessageToast',
	"sap/ui/core/Fragment",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator",
	"sap/ui/model/SimpleType",
	"sap/ui/model/ValidateException",
	"sap/m/MessageBox",
], function (Controller,
	JSONModel,
	Core,
	library,
	DateTypeRange,
	UI5Date,
	MessageToast,
	Fragment,
	Filter,
	FilterOperator,
	SimpleType,
	ValidateException,
	MessageBox) {
	"use strict";

	return Controller.extend("sap.ui5.walkthrough.controller.App", {
		onInit: function () {
			var oView = this.getView(),
				oMM = Core.getMessageManager();

			oView.setModel(new JSONModel({ name: "", email: "" }));
			oMM.registerObject(oView.byId("nameInput"), true);
			oMM.registerObject(oView.byId("emailInput"), true);
		},
		// 自定义
		customEMailType: SimpleType.extend("email", {
			formatValue: function (oValue) {
				return oValue;
			},

			parseValue: function (oValue) {
				//parsing step takes place before validating step, value could be altered here
				return oValue;
			},

			validateValue: function (oValue) {
				// The following Regex is only used for demonstration purposes and does not cover all variations of email addresses.
				// It's always better to validate an address by simply sending an e-mail to it.
				var rexMail = /^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/;
				if (!oValue.match(rexMail)) {
					throw new ValidateException("'" + oValue + "' is not a valid e-mail address");
				}
			}
		}),
	});
});

要想数据验证生效，必须要绑定JSON对象，并且要设置oMM.registerObject(oView.byId("nameInput"), true);

此外，还可以添加一个提交按钮，按下提交按钮后，需要判断所有的inputs都合法，然后再允许用户提交，否则弹出错误的对话框。

// 如果只是验证，不再submit的时候再重新验证，下面的代码可以不用谢
onSubmit: function() {
	// 收集所有的输入框
	var oView = this.getView();
	var oInputs = [
		oView.byId("nameInput"),
		oView.byId("emailInput")
	];
	var bValidationError = false;

	// 循环遍历所有的inputs，判断每一个inputs是否都合法
	oInputs.forEach(function(oInput) {
		bValidationError = this._validateInput(oInput) || bValidationError; 
	}, this);
	
	if (!bValidationError) {
		MessageToast.show("The input is ok");
	} else {
		MessageBox.alert("The input is not correct!")
	}
},

// 用于验证input是否合法
_validateInput: function(oInput) {
	var sValueState = "None"; // 用于设置输入框状态 如果不合法 输入框变成红色
	var bValidationError = false;
	var oBinding = oInput.getBinding("value"); // 获取用户输入内容

	try {
		oBinding.getType().validateValue(oInput.getValue()); // 对比是否满足验证条件，不满足就抛出异常
	} catch (oException) {
		sValueState = "Error";
		bValidationError = true;
	}
	return bValidationError;
}

1.5 自定义ValueHelper图标的Input

只需要给Input添加valueHelpIconSrc="sap-icon://arrow-left"属性即可。

<Input
	id="inputValueHelpCustomIcon"
	class="sapUiSmallMarginBottom"
	type="Text"
	placeholder="Enter product"
	showValueHelp="true"
	valueHelpIconSrc="sap-icon://arrow-left"
	valueHelpRequest="handleValueHelp"
/>

1.6 带有描述的Input

可以给Input属性添加description属性，内容会显示在Input之后
在这里插入图片描述

<Label
	text="Name"
	labelFor="nameInput"
/>
<Input
	id="nameInput"
	class="sapUiSmallMarginBottom"
	placeholder="Enter name"
	description="姓名"
	valueStateText="Name must not be empty. Maximum 10 characters."
	value="{
		path: '/name',
		type: 'sap.ui.model.type.String',
		constraints: {
			minLength: 1,
			maxLength: 10
		}
	}"
/>
<Label
	text="E-mail"
	labelFor="emailInput"
/>
<Input
	id="emailInput"
	class="sapUiSmallMarginBottom"
	type="Email"
	description="电子邮件"
	placeholder="Enter email"
	valueStateText="E-mail must be a valid email address."
	value="{
		path: '/email',
		type: '.customEMailType'
	}"
/>

此外，可以给Input添加showClearIcon属性，然后就会显示一个叉号用来清空Input内容
在这里插入图片描述

1.7 密码输入框Input

通过设置type="Password"来让Input输入框中不显示明文内容
在这里插入图片描述

1.8 自定义suggestion时的匹配规则

默认的匹配规则是匹配每一个单词的开头，比如Macbook Pro，如果输入ma，或者驶入pr都可以匹配到，但是如果输入oo，则匹配不到。我们可以通过设置Input的setFilterFunction来自定义自己的规则。具体代码如下：

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
>
	<l:VerticalLayout class="sapUiContentPadding" width="100%">
		<Label text="Product" labelFor="productInput" />
		<Input
			id="productInput"
			placeholder="Enter product"
			showSuggestion="true"
			showValueHelp="true"
			valueHelpRequest=".onValueHelpRequest"
			suggestionItems="{/ProductCollection}">
			<suggestionItems>
				<core:Item text="{Name}" />
			</suggestionItems>
		</Input>
	</l:VerticalLayout>
</mvc:View>

sap.ui.define([
	'sap/ui/core/mvc/Controller',
	'sap/ui/model/json/JSONModel',
	"sap/ui/core/Core",
	"sap/ui/core/library",
	"sap/ui/unified/DateTypeRange",
	"sap/ui/core/date/UI5Date",
	'sap/m/MessageToast',
	"sap/ui/core/Fragment",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator"
], function (Controller,
	JSONModel,
	Core,
	library,
	DateTypeRange,
	UI5Date,
	MessageToast,
	Fragment,
	Filter,
	FilterOperator) {
	"use strict";

	return Controller.extend("sap.ui5.walkthrough.controller.App", {
		/**
		 * @override
		 */
		onInit: function() {
			var oModel = new JSONModel({
				ProductCollection : [
					{Name : "Mac mini", ProductId : "001"},
					{Name : "Mac Pro", ProductId : "002"},
					{Name : "Macbook", ProductId : "003"},
					{Name : "Macbook Pro", ProductId : "004"},
				]
			});
			this.getView().setModel(oModel);

			this.byId("productInput").setFilterFunction(function (sTerm, oItem) {
				return oItem.getText().match(new RegExp(sTerm, "i"));
			});
		},
	});
});

1.9 只通过ValueHelper输入的Input

在某些情况下，我们可能不允许用户在Input上直接输入值，而是通过选择的方式来实现。这个时候可以设置Input属性valueHelpOnly="true"，这样用户只要点击Input，就是自动弹出valueHelper的对话框，用户只能通过选择来实现输入内容到Input组件中

<Label
	text="Product"
	labelFor="productInput"
/>
<Input
	id="productInput"
	placeholder="Enter product"
	showValueHelp="true"
	valueHelpRequest=".onValueHelpRequest"
	valueHelpOnly="true"
>
</Input>

1.10 按照某一字段分类显示suggestion的Input

和之前的ComboBox一样，只需要修改suggestionItems的内容，添加相应的分类字段即可。
代码如下：
在这里插入图片描述

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
>
	<l:VerticalLayout class="sapUiContentPadding" width="100%">
		<Label text="Product" labelFor="productInput" />
		<Input
			id="productInput"
			placeholder="Enter product"
			showSuggestion="true"
			showValueHelp="true"
			valueHelpRequest=".onValueHelpRequest"
			suggestionItems="{
				path : '/ProductCollection',
				sorter : {
					path : 'Category',
					group : true,
					ascending : false
				}
			}"
			suggestionItemSelected=".onSuggestionItemSelected">
			<suggestionItems>
				<core:Item key="{ProductId}" text="{Name}" />
			</suggestionItems>
		</Input>
		<Label text="Selected Key" labelFor="selectedKey" />
		<Text id="selectedKeyIndicator" />
	</l:VerticalLayout>
</mvc:View>

1.11 带掩码的Input

通过设置掩码可以实现对用户输入的内容进行限制并进行格式化。

  • 匹配任意的10个字符
<MaskInput mask="~~~~~~~~~~" placeholderSymbol="_" placeholder="All characters allowed">
	<rules>
		<MaskInputRule maskFormatSymbol="~" regex="[^_]"/>
	</rules>
</MaskInput>
  • 匹配所有的字母和数字
<MaskInput mask="**********" placeholderSymbol="_" placeholder="Latin characters (case insensitive) and numbers">
	<rules>
		<MaskInputRule/>
	</rules>
</MaskInput>
  • 匹配所有数字
<MaskInput mask="(999) 999 999999" placeholderSymbol="_" placeholder="Enter twelve-digit number" showClearIcon="true" />
  • 只允许数字和大写字母
<MaskInput mask="CCCC-CCCC-CCCC-CCCC-CCCC" placeholderSymbol="_" placeholder="Enter digits and capital letters" showClearIcon="{/showClearIcon}">
	<rules>
		<MaskInputRule maskFormatSymbol="C" regex="[A-Z0-9]"/>
	</rules>
</MaskInput>
  • 产品序列号-以SAP开头，后面是大写字母和数字
<MaskInput mask="SAP-CCCCC-CCCCC" placeholderSymbol="_" placeholder="Starts with 'SAP' followed by digits and capital letters" showClearIcon="true">
	<rules>
		<MaskInputRule maskFormatSymbol="C" regex="[A-Z0-9]"/>
	</rules>
</MaskInput>
  • 纯数字ISBN
<Label text="ISBN" />
<MaskInput mask="999-99-999-9999-9" placeholderSymbol="_" placeholder="Enter thirteen-digit number" showClearIcon="true" />

通过设置占位符结合正则表达式实现对数据内容的限制
<MaskInputRule maskFormatSymbol="C" regex="[A-Z0-9]"/>
上面的意思就是使用C来代表是任意一个大写字母和数字

2. Radio Button控件

主要注意一下Radio Button控件是如何实现互斥的。

<RadioButtonGroup id="GroupA">
	<RadioButton text="Option 1" selected="true" />
	<RadioButton text="Option 2" />
	<RadioButton text="Option 3" />
	<RadioButton text="Option 4" />
	<RadioButton text="Option 5" />
</RadioButtonGroup>

通过将互斥的一组Radio Button控件放在一组中来实现互斥。

此外，RadioButtonGroup控件还可以实现对RadioButton进行排版。
例如可以设置一行显示3个RadioButton，超出的自动换行到下一行

<RadioButtonGroup id="rbg1" columns="3" width="100%" class="sapUiMediumMarginBottom">
	<RadioButton id="RB1-1" text="Long Option Number 1" />
	<RadioButton id="RB1-2" text="Option 2" enabled="false" />
	<RadioButton id="RB1-3" text="Nr. 3" editable="false" />
	<RadioButton id="RB1-5" text="Option 5" />
	<RadioButton id="RB1-6" text="Nr. 6" />
</RadioButtonGroup>

在这里插入图片描述

一行显示3个，超出的部分会自动的转移到下一行

3. Select控件

3.1 不绑定任何数据源

Select可以不绑定任何的数据源，使用方法就是像在HTML中一样。

<Select id="sfcStatusSelect">
	<core:Item key="1" text="{i18n>/PackComplete}" />
	<core:Item key="2" text="{i18n>/PackIncomplete}" />
</Select>

3.2 绑定数据源显示内容

Select也可以绑定数据源显示内容，方法和其他的控件绑定数据源一样。代码如下：

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:form="sap.ui.layout.form"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
>
	<Select
		forceSelection="false"
		items="{
			path: '/ProductCollection',
			sorter: {
				path: 'Name'
			}
		}"
	>
		<core:Item
			key="{ProductId}"
			text="{Name}"
		/>
	</Select>
</mvc:View>

sap.ui.define([
	'sap/ui/core/mvc/Controller',
	'sap/ui/model/json/JSONModel',
	"sap/ui/core/Core",
	"sap/ui/core/library",
	"sap/ui/unified/DateTypeRange",
	"sap/ui/core/date/UI5Date",
	'sap/m/MessageToast',
	"sap/ui/core/Fragment",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator"
], function (Controller,
	JSONModel,
	Core,
	library,
	DateTypeRange,
	UI5Date,
	MessageToast,
	Fragment,
	Filter,
	FilterOperator) {
	"use strict";

	return Controller.extend("sap.ui5.walkthrough.controller.App", {
		onInit: function () {
			var oModel = new JSONModel({
				ProductCollection: [
					{ Name: "Mac mini", ProductId: "001" },
					{ Name: "Mac Pro", ProductId: "002" },
					{ Name: "Macbook", ProductId: "003" },
					{ Name: "Macbook Pro", ProductId: "004" },
				]
			});
			this.getView().setModel(oModel);
		},
	});
});

这个属性forceSelection="false"可以选择空，如果为true，则用户必须从下拉列表中选择一个Item才可以

如果要显示两列内容，则需要添加showSecondaryValues="true"属性，并且修改Item为ListItem，具体代码如下：

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:form="sap.ui.layout.form"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
>
	<Select
		forceSelection="false"
		showSecondaryValues="true"
		items="{
			path: '/ProductCollection',
			sorter: {
				path: 'Name'
			}
		}"
	>
		<core:ListItem
			key="{ProductId}"
			text="{Name}"
			additionalText="{ProductId}"
		/>
	</Select>
</mvc:View>

3.3 带有图标的Select

在Select中，允许给Item添加icon，只需要给ListItem添加icon属性即可，代码如下：

<mvc:View
	height="100%"
	controllerName="sap.m.sample.SelectWithIcons.Page"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m">
	<Page
		showHeader="false"
		class="sapUiContentPadding">
		<content>
				<Select
					forceSelection="false"
					selectedKey="{/SelectedProduct}"
					items="{
						path: '/ProductCollection',
						sorter: { path: 'Name' }
					}">
					<core:ListItem key="{ProductId}" text="{Name}" icon="{Icon}"/>
				</Select>
		</content>
	</Page>
</mvc:View>

在UI5中，onChange和onLiveChange是两个事件，用于监听输入框（Input）或其他控件的值变化。

  1. onChange事件在输入框的值发生变化并且焦点移出输入框时触发。它通常用于捕捉用户最终提交或确认输入的时刻。例如，当用户输入完毕并点击回车键或离开输入框时，onChange事件会被触发。

  2. onLiveChange事件在输入框的值发生变化时实时触发，无需等待焦点移出输入框。它通常用于实时响应用户输入的变化，并进行一些实时的处理或反馈。例如，可以在用户输入时实时验证输入的合法性或进行搜索提示。

总的来说，onChange适用于需要在用户最终确认输入时才进行处理的场景，而onLiveChange适用于需要实时响应用户输入变化的场景。选择使用哪个事件取决于你的业务需求和用户体验的设计。

4. StepInput控件

通过StepInput控件，可以实现步长式输入。
在这里插入图片描述
代码如下：

<mvc:View
	controllerName="sap.ui5.walkthrough.controller.App"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:form="sap.ui.layout.form"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
>
	<StepInput 
		value="0"
		min="0"
		max="100"
		step="0.1"
		displayValuePrecision="3" 
		width="50%"
		fieldWidth="60%"
		description="EUR"
	/>
</mvc:View>
  • displayValuePrecision精确度：精确到小数点后多少位

注意：StepInput控件自带输入合法性验证功能，如果输入的数字不在[min, max]范围内，那么会呈现红色，并报错

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/742317.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Django新手必看：如何创建应用和定义数据表。看完这一篇就够了

Django新手必看：如何创建应用和定义数据表。看完这一篇就够了

1. Django创建应用 Django 项目就是基于 Django 框架开发的 Web 应用&#xff0c;它包含了一组配置和多个应用&#xff0c;我们把应用称之为App&#xff0c;在前文中对它也做了相应的介绍&#xff0c;比如 auth、admin&#xff0c;它们都属于 APP。一个 App 就是一个 Python 包…
阅读更多...
这7个AI软件让设计效率飞起，快来收藏

这7个AI软件让设计效率飞起，快来收藏

伴随着AI技术的发展&#xff0c;设计师使用AI工具来提高工作效率已成为一种趋势&#xff0c;越来越多的AI工具也出现在市场上。本文收集了市场上7个好用的AI工具推荐给大家&#xff0c;一起来看看吧&#xff01; 1、即时 AI 即时 AI是一款依赖AI技术&#xff0c;实现网页设计…
阅读更多...
梯度(第四节)

梯度(第四节)

目录 一.总结 二.l的方向余弦 三.方向导数 四.方向导数和方向余弦的联系 五.梯度 1.定义 2.性质 3.运算公式 4.例题 六.最快下降法 一.总结 上一节我们研究了数量场和矢量场的宏观特征&#xff0c;但宏观特征&#xff0c;在细节上往往无法展现事物的真正全 貌&…
阅读更多...
Instruct2Act：使用大型语言模型将多模态指令映射到机器人动作

Instruct2Act：使用大型语言模型将多模态指令映射到机器人动作

Instruct2Act&#xff1a;使用大型语言模型将多模态指令映射到机器人动作 基础模型在多种应用中取得了重大进步&#xff0c;包括文本到图像的生成、全景分割和自然语言处理。本文提出了一个名为Instruct2Act的框架&#xff0c;该框架利用大型语言模型将多模态指令映射为机器人…
阅读更多...
代码随想录算法学习心得 42 | 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II...

代码随想录算法学习心得 42 | 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II...

一、买卖股票的最佳时机 链接&#xff1a;力扣 描述&#xff1a;给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算…
阅读更多...
iOS添加测试设备报错ineligible for 14 days

iOS添加测试设备报错ineligible for 14 days

2023年7月8日申请苹果个人开发账号审核通过。 2023年7月10日在苹果开发平台分别创建Certificates、Identifiers、Devices添加一台测试设备、Profiles&#xff0c;将已经准备好的项目打包上传&#xff0c;使用testflight测试app&#xff0c;使用测试设备一切顺利。 2023年7月1…
阅读更多...
中缀表达式转前、后缀表达式

中缀表达式转前、后缀表达式

中缀表达式&#xff1a;按照人为理解的运算优先顺序进行计算&#xff0c;如ab 前缀表达式&#xff1a;运算符在括号之前&#xff0c;如ab 后缀表达式&#xff1a;运算符提在括号之后&#xff0c;如ab 解题步骤&#xff1a; ①用括号把每一个表达式括起来(可以先全部括起来后挨…
阅读更多...
RPC分布式网络通信框架（一）—— protobuf的使用

RPC分布式网络通信框架（一）—— protobuf的使用

文章目录 一、protobuf的好处二、如何创建proto三、编译生成的C类UserServiceRpcUserServiceRpc_Stub四、序列化和反序列化序列化反序列化 粘包问题解决调用者组包提供者解包 一、protobuf的好处 1、protobuf是二进制存储的&#xff0c;xml和json都是文本存储的。故protobuf占…
阅读更多...
综合布线系统（PDS）

综合布线系统（PDS）

综合布线系统&#xff08;PDS&#xff09; 综合布线系统的基本标准 ● TIA/EIA-568A/B&#xff1a;商业大楼电信布线标准 ● EIA/TIA-569:电信通道和空间的商业大楼标准 ● EIA/TIA-570&#xff1a;住宅和N型商业电信布线标准 ● TIA/EIA-606&#xff1a;商业大楼电信基础设施…
阅读更多...
windows便签推荐哪款？

windows便签推荐哪款？

随着科技技术的进步&#xff0c;越来越多的人喜欢使用便签软件&#xff0c;因为它们能帮助我们快速记录和管理重要的信息和任务。在快节奏的现代生活中&#xff0c;便签软件成为了我们生活和工作中不可或缺的工具。特别是对于经常使用电脑的用户来说&#xff0c;一款优秀的便签…
阅读更多...
戴尔外星人x16r1原装Win11系统带F12还原功能

戴尔外星人x16r1原装Win11系统带F12还原功能

戴尔外星人x16r1原装Win11系统带F12还原功能 电脑恢复到新机状态&#xff0c;完成&#xff1a; 1.系统恢复到预装系统&#xff0c;与新机买来状态完全一致&#xff1b; 2.隐藏恢复分区&#xff0c;戴尔与外星人相同&#xff0c;可以用来开机F12进入supportassis os recovery…
阅读更多...
选择排序

选择排序

选择排序 排序步骤&#xff08;有n个数需要排序&#xff09; 在一组序列中找到最大/小的元素&#xff0c;将其与序列的起始位置交换&#xff1b;此时可进一步缩小排序范围&#xff0c;将改序列的起始位置移出&#xff1b;寻找剩余范围序列中的最大/小值&#xff0c;与此时序列…
阅读更多...
deeplabv3+源码之慢慢解析 第二章datasets文件夹(1)voc.py--voc_cmap函数和download_extract函数

deeplabv3+源码之慢慢解析 第二章datasets文件夹(1)voc.py--voc_cmap函数和download_extract函数

系列文章目录&#xff08;更新中&#xff09; 第一章deeplabv3源码之慢慢解析 根目录(1)main.py–get_argparser函数 第一章deeplabv3源码之慢慢解析 根目录(2)main.py–get_dataset函数 第一章deeplabv3源码之慢慢解析 根目录(3)main.py–validate函数 第一章deeplabv3源码之…
阅读更多...
JS UMD规范实现

JS UMD规范实现

UMD实现范例 (function (root, factory) {if (typeof module object && typeof module.exports object) {console.log(是commonjs模块规范&#xff0c;nodejs环境);var depModule require(./umd-module-depended);module.exports factory(depModule);} else if (t…
阅读更多...
ElasticSearch入门教程--集群搭建和版本比较

ElasticSearch入门教程--集群搭建和版本比较

文章目录 一、ElasticSearch 集群二、Elasticsearch的核心概念2.1、分片&#xff08;Shards&#xff09;2.2、副本&#xff08;Replicas&#xff09;2.3、路由计算2.4、倒排索引 三、Kibana简介四、Spring Data ElasticSearch 一、ElasticSearch 集群 Elasticsearch 集群有一个…
阅读更多...
python pytorch 纯算法实现前馈神经网络训练（数据集随机生成）-续

python pytorch 纯算法实现前馈神经网络训练（数据集随机生成）-续

python pytorch 纯算法实现前馈神经网络训练&#xff08;数据集随机生成&#xff09;-续 上一次的代码博主看了&#xff0c;有两个小问题其实&#xff0c;一个是&#xff0c;SGD优化的时候&#xff0c;那个梯度应该初始化为0&#xff0c;还一个是我并没有用到随机生成batch。 …
阅读更多...
Flowable边界事件-定时边界事件

Flowable边界事件-定时边界事件

定时边界事件 定时边界事件一、定义1. 图形标记2. 完整的流程图3. XML标记 二、测试用例2.1 定时边界事件xml文件2.2 定时边界事件测试用例 总结 定时边界事件 一、定义 时间达到设定的时间之后触发事件 由于定时边界事件和开始定时事件几乎差不多&#xff0c;四种情况我就不一…
阅读更多...
14、双亲委托模型

14、双亲委托模型

双亲委托模型 先直接来看一幅图 双亲委派模型的好处&#xff1a; 主要是为了安全性&#xff0c;避免用户自己编写的类动态替换Java的一些核心类&#xff0c;比如 String。 同时也避免了类的重复加载&#xff0c;因为JVM中区分不同类&#xff0c;不仅仅是根据类名&#xff0c…
阅读更多...
React 新版官方文档 (二) useState 用法详解

React 新版官方文档 (二) useState 用法详解

背景 本文默认读者对 useState 有最为基本的了解&#xff0c;比如知道他的写法应当是怎样的&#xff0c;下面着重介绍部分重要的、在开发过程中会踩的坑和一些特性&#xff0c;最后动手实现一个最基本的 useState 代码 useState ⭐️ 注意事项: 状态只在下次更新时异步变化&…
阅读更多...
Shiro教程（一）：入门概述与基本使用

Shiro教程（一）：入门概述与基本使用

Shiro 第一章&#xff1a;入门概述 1.1 Shiro是什么 Apache.Shiro是一个功能强大且易于使用的Java安全&#xff08;权限&#xff09;框架。Shiro可以完成&#xff1a;认证、授权、加密、会话管理、与Web集成、缓存等。借助Shiro可以快速轻松地保护任何应用程序——从最小的移…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023