TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊
正如我在評(píng)論中提到的，問(wèn)題中當(dāng)前方法的用戶(hù)體驗(yàn)非常值得懷疑：
它缺少一個(gè)能指。沒(méi)有明確的跡象表明，只有該不可編輯字段（與所有其他不可編輯字段相比）一旦單擊就會(huì)觸發(fā)某些內(nèi)容。
喜歡手動(dòng)輸入條形碼的用戶(hù)需要先單擊鍵盤(pán)按鈕以使輸入字段可編輯，然后再次單擊輸入字段以輸入數(shù)據(jù)。
相反，請(qǐng)考慮通過(guò)其 value-help ( ) 操作在單個(gè)輸入字段中提供這兩個(gè)選項(xiàng)（手動(dòng)輸入并觸發(fā)相機(jī)進(jìn)行掃描） ：F4
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/Fragment"
], async (Fragment) => {
"use strict";
const control = await Fragment.load({
definition: `<form:SimpleForm xmlns:form="sap.ui.layout.form"
xmlns="sap.m"
editable="true"
layout="ColumnLayout">
<Label text="Barcode Number" />
<Input width="12rem"
textAlign="Center"
placeholder="XXXXXXXXX"
showValueHelp="true"
valueHelpIconSrc="sap-icon://bar-code"
valueHelpRequest="alert('Scanner triggered!')"
/>
</form:SimpleForm>`,
});
control.placeAt("content");
}));
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody"></body>
"sap-icon://bar-code"通過(guò)分配給valueHelpIconSrc中的屬性（自 v1.84.0 起可用），可以將值幫助圖標(biāo)設(shè)置為條形碼一sap.m.Input。
這種方法對(duì)用戶(hù)和開(kāi)發(fā)人員都有利，因?yàn)樵撔袨楝F(xiàn)在與常見(jiàn)的用戶(hù)輸入場(chǎng)景一致，提高了熟悉度，并且對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)，由于定制較少，它大大降低了維護(hù)成本。
如果目標(biāo)UI5版本低于1.84.0或者條形碼有固定長(zhǎng)度，則需要使用該方法擴(kuò)展該控件addEndIcon。我在另一個(gè)答案中對(duì)此進(jìn)行了解釋。這是一個(gè)擴(kuò)展的示例sap.m.MaskInput：
請(qǐng)參閱https://embed.plnkr.co/EzlF2tkvalJWvSEn?preview
TA貢獻(xiàn)1868條經(jīng)驗(yàn) 獲得超4個(gè)贊
如果您的不可編輯input是因?yàn)樗哂袑傩远豢删庉媎isabled，則您無(wú)法將鼠標(biāo)事件附加到它。（實(shí)際上你可以，但它不會(huì)觸發(fā)鼠標(biāo)事件。）
如果要觸發(fā)單擊事件，可以將事件偵聽(tīng)器添加到父元素，如div下面的示例中的 a 。
雖然它在沒(méi)有它的 Chrome 中也能工作，但您還需要設(shè)置pointer-events為noneoninput以使點(diǎn)擊在 Firefox 中傳遞到父元素。
const parentDiv = document.querySelector("div");
const input = document.querySelector("input");
parentDiv.addEventListener("click", (e) => {
input.removeAttribute("disabled");
input.focus();
// or you can open the barcode scanner, etc.
});
input {
font-size: 2rem;
padding: 0.5rem 1rem;
}
input[disabled] {
pointer-events: none;
}
<div>
<input type="text" value="disabled field" disabled>
</div>
label如果label包含以下內(nèi)容，它也可以使用input：
<label>Barkod No:
<input type="text" value="disabled field" disabled>
</label>
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊
試試這個(gè)，用您自己的啟用函數(shù)替換 displayDate 函數(shù)：
document.getElementById("myBtn").addEventListener("click",?displayDate);然后調(diào)用 CSS 更改：
input[type="text"]:enabled?{}
舉報(bào)