0

我最初有一个 dxNumberBox，它仅将输入限制为数字，但我必须将其转换为 dx-autocomplete 才能为其提供数据源并使自动完成功能可用

我怎样才能让 dx-autocomplete 只接受号码？

原始号码框：

<dx-number-box [(ngModel)]="jobNo"                         
            value=""            
            placeholder="JobNo..."
            stylingMode="outlined">
        </dx-number-box>

dx-自动完成：

          <dx-autocomplete [(ngModel)]="jobNo"                              
              searchMode="startswith"
              [dataSource]="storedJobNumbers"                                             
              placeholder="JobNo..."
              stylingMode="outlined">                  
          </dx-autocomplete>

到目前为止，我已经尝试过 elementAttr、inputAttr、type 等，但没有成功。也许我只是使用不正确。

4

1 回答 1

1

首先，确保你dataSource是一个字符串数组（即使这些字符串代表数字，因为<dx-autocomplete>不支持数字数组。即；使用这个：

["1", "564", "9001", "154", ...]

与此相反：

[1, 564, 9001, 154, ...]

然后限制用户输入，我不相信有开箱即用的选项，但这是我或多或少使用的方法：

<dx-autocomplete 
  (onPaste)="paste($event)" 
  (onKeyPress)="keyPress($event)" 
  [dataSource]="source">
</dx-autocomplete>

使用onPasteandonKeyPress事件，并在您的绑定函数中，检查输入并采取相应措施。一个简单的检查可能如下所示（但如果需要，您可以进行更彻底的检查）：

/*Stops the event from occurring if the data being paste isn't a number*/
paste(e) {
  if(isNaN(e.event.clipboardData.getData('text'))){
    e.event.preventDefault();
  }
}
/*Stops the event from occurring if the key pressed isn't a number*/
keyPress(e) {
  if(isNaN(+e.event.key)||e.key === " ") {
    e.event.preventDefault();
  }
}

请注意，您也可以使用该onInput事件在一个事件中同时覆盖按键和粘贴，但它的工作方式略有不同（自动完成的值将在按键/粘贴/...上更改，但如果输入的内容是不是数字）

让我知道这是否适合你:)

更新：添加 事件检查drop

Devextreme 没有自己的onDrop事件，但常规浏览器drop事件可以正常工作，如下所示：

<dx-autocomplete ...
(drop)="drop($event)"></dx-autocomplete>

drop(e) {
    if(isNaN(e.dataTransfer.getData('text'))){
      e.preventDefault()
    }
  }

作为预防措施，您应该始终假设用户在使用该数据之前设法以某种方式输入了意外输入。

在您的特定场景中没关系，因为所有字段都尝试自动完成输入（意味着错误的输入不会给出任何预填充的答案，这并不可怕），但是如果数据用于更重要的事情（后端 API 调用)，您应该始终检查输入以查看它是否格式不正确。

于 2019-09-19T07:02:54.337 回答