HTML 中的自定义输入掩码

Question

我想生成带有自定义掩码（如

--day/--night

）的文本输入类型，并且用户仅用数字替换

-

。有什么建议吗？请在这里帮助我。

duration: --day/--night

Answer 1

使用两个输入效率更高。

但是如果你真的想这样做，是的，你可以做到。每次用户输入字符时，您都需要检查输入值并将该值格式化为您想要的格式。您还可以使用

selectionStart

和

selectionEnd

属性来操纵光标位置。

还有许多用于输入的掩码插件。 http://plugins.jquery.com/tag/mask/

Answer 2

您可以执行以下操作：

创建一个占位符“--”，用户可以在其中写入内容。这是我的意思的一个简短示例：

duration: <input placeholder="--" maxlength="2">day/<input placeholder="--" maxlength="2">night

Answer 3

Telerik 提供免费版本的“Kendo UI”JavaScript 代码。这是您想要的示例：http://demos.telerik.com/kendo-ui/maskedtextbox/index

这是免费代码：http://www.telerik.com/download/kendo-ui-core

这是他们托管在 Github 上的屏蔽输入代码：https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.maskedtextbox.js

Answer 4

编写此类代码非常困难，但您可以使用此代码进行此类格式化。

<div>
    <label for="phone">Phone</label>
    <!-- or set via JS -->
    <input id="phone" type="text" />
  </div>

jquery代码

   $(":input").inputmask();

    $("#phone").inputmask({"mask": "99/99"});

查看codepen链接点击这里

Answer 5

 <div style={{ position: 'relative' }}>
  <p>{getMaskedString(value)</p>
  <input
    type="password"
    name="password"
    onChange={handleInputChange}
    onFocus={handleFocus}
    value={value}
    onBlur={handleBlur}
    style={{
      position: 'absolute',
      left: 0,
      top: 0,
      width: '100%',
      height: '100%',
      backgroundColor: 'transparent', // Make background transparent
      zIndex: 0, // Lower z-index initially
      outline: 'none', // Remove outline
    }}
  />
</div>

使backgroundColor：'透明'，是使输入的背景透明的关键，将其隐藏在用户面前，但所有onFocus和onBlur效果都会发生，并且自定义文本会显示在该输入上