如何将点击事件添加到输入字段？
[英]How do I add the click event to the input field?
问题描述
我想向条目添加一个按钮属性。 例如;
我有一个无法编辑的输入字段：
当我按下键盘按钮时，它变得可编辑：
当用户在不需要不同按钮的情况下单击输入字段时，它必须运行不同的 function。 例如条码扫描仪。 不可编辑的输入能否触发 function？ 或者可编辑的输入是否可以触发任何 function？ 我该怎么做呢？
在这个应用程序中，条形码事件应该由输入字段触发，而不是按钮。
3 个解决方案
解决方案1
3 2020-12-11 22:54:55
正如我在评论中提到的，问题中当前方法的用户体验非常值得怀疑：
- 它缺少一个能指。 没有明确的迹象表明只有那个不可编辑的字段——与所有其他不可编辑的字段相比——一旦点击就会触发某些东西。
- 喜欢手动输入条形码的用户需要先单击键盘按钮以使输入字段可编辑，然后再次单击输入字段以输入数据。
相反，请考虑通过其值帮助 ( 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"分配给 sap.m.Input 中的valueHelpIconSrc属性（自sap.m.Input起可用），可以将值帮助图标设置为条形码。
这种方法对用户和开发人员都有好处，因为该行为现在与常见的用户输入场景一致，提高了熟悉度，并且对于开发人员来说，由于定制较少，因此大大降低了维护成本。
如果目标 UI5 版本低于 1.84.0 或条形码为固定长度，则需要使用addEndIcon方法扩展控件。 我在另一个答案中解释了这一点。 这是一个扩展sap.m.MaskInput的示例：
解决方案2
0 2020-12-11 18:44:01
如果您的不可编辑input是不可编辑的，因为它具有disabled属性，则您不能将鼠标事件附加到它。 （实际上你可以，但它不会触发鼠标事件。）
如果要触发单击事件，可以将事件侦听器添加到父元素，例如下面示例中的div 。
尽管它在没有它的情况下在 Chrome 中工作，但您还需要在input上将pointer-events设置为none ，以使点击落到 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包含以下input ，它也可以与label使用：
<label>Barkod No:
<input type="text" value="disabled field" disabled>
</label>
解决方案3
-1 2020-12-11 18:41:33
试试这个，用你自己的启用 function 替换 displayDate 函数：
document.getElementById("myBtn").addEventListener("click", displayDate);
然后调用 CSS 更改：
input[type="text"]:enabled {
}
React - 我是否必须为每个输入字段添加一个onChange事件处理程序，以使输入字段不是只读的？
[英]React - Do I HAVE to add an onChange event handler to each input field to make input field NOT read only?
如何在点击的javascript中将1添加到输入字段中的值？
[英]How to add 1 to a value in an input field with javascript on click?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.