以下代码将显示带有选项的输入。每当用户键入内容时,都应搜索该文本并显示结果。对于在 input事件上实现的“ onInputChanges()”。在Chrome浏览器中可以完美运行,但在Edge浏览器中则无法运行。
引用了很多StackOverflow问题,但是这些问题都不是针对边缘浏览器的。
<div>
<input type="text" list="browsers" (keyup.enter)="addValue(fieldInput.value); fieldInput.value=''"
#fieldInput (input)="onInputChanges(fieldInput.value, $event)">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</div>
当用户键入从数据列表中选择的内容或选项时,Chrome中会触发输入事件。 在chrome浏览器中,下面的代码(Object.prototype.toString.call(event))标识用户是输入值还是从列表中选择值。 Chrome浏览器,如果用户键入,则Object.prototype.toString.call(event)返回为“ InputEvent”,否则返回为“ Event”。
onInputChanges(fieldInput.value, $event) {
let isInputEvent = Object.prototype.toString.call(event).indexOf("InputEvent")> -1);
if(isInputEvent) {
//user typed the value in input box
}else {
//selected from list
}
}
但是在Edge浏览器中, Object.prototype.toString.call(event)始终返回“ Event ”,因此,无法区分用户键入或用户从Edge列表中选择的值。
还有其他识别事件信息的方法吗? 注意: event.type始终返回“输入”,因此不能使用它。
基本示例:https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist
答案 0 :(得分:0)
什么是Edge浏览器版本?我已经在Edge浏览器(Microsoft Edge 42.17134.1.0版本)中使用以下代码尝试了您的代码,看来一切正常:
<div>
<input type="text" list="browsers" (keyup.enter)="addValue(fieldInput.value); fieldInput.value=''"
#fieldInput (input)="onInputChanges(fieldInput.value, $event)">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</div>
<span>
{{selectedvalue}}
</span>
component.ts文件中的代码:
onInputChanges(value, event){
this.selectedvalue=value;
}
以下截图: