TA貢獻1829條經驗 獲得超4個贊
正如我在評論中提到的，問題中當前方法的用戶體驗非常值得懷疑：
它缺少一個能指。沒有明確的跡象表明，只有該不可編輯字段（與所有其他不可編輯字段相比）一旦單擊就會觸發某些內容。
喜歡手動輸入條形碼的用戶需要先單擊鍵盤按鈕以使輸入字段可編輯，然后再次單擊輸入字段以輸入數據。
相反，請考慮通過其 value-help ( ) 操作在單個輸入字段中提供這兩個選項（手動輸入并觸發相機進行掃描） ：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"通過分配給valueHelpIconSrc中的屬性（自 v1.84.0 起可用），可以將值幫助圖標設置為條形碼一sap.m.Input。
這種方法對用戶和開發人員都有利，因為該行為現在與常見的用戶輸入場景一致，提高了熟悉度，并且對于開發人員來說，由于定制較少，它大大降低了維護成本。
如果目標UI5版本低于1.84.0或者條形碼有固定長度，則需要使用該方法擴展該控件addEndIcon。我在另一個答案中對此進行了解釋。這是一個擴展的示例sap.m.MaskInput：
請參閱https://embed.plnkr.co/EzlF2tkvalJWvSEn?preview
TA貢獻1868條經驗 獲得超4個贊
如果您的不可編輯input是因為它具有屬性而不可編輯disabled，則您無法將鼠標事件附加到它。（實際上你可以，但它不會觸發鼠標事件。）
如果要觸發單擊事件，可以將事件偵聽器添加到父元素，如div下面的示例中的 a 。
雖然它在沒有它的 Chrome 中也能工作，但您還需要設置pointer-events為noneoninput以使點擊在 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包含以下內容，它也可以使用input：
<label>Barkod No:
<input type="text" value="disabled field" disabled>
</label>
TA貢獻1828條經驗 獲得超3個贊
試試這個，用您自己的啟用函數替換 displayDate 函數：
document.getElementById("myBtn").addEventListener("click",?displayDate);然后調用 CSS 更改：
input[type="text"]:enabled?{}
舉報