Question

我正在尝试输入数字（在移动设备中打开数字键盘+向上和向下箭头）并使其像搜索类型一样 - 如果输入中有数据，则在输入前添加“X”。< / p>

问题是只能选择一种类型 - 搜索或编号......

怎么可能？即使只是制作搜索类型并添加数字键盘功能也是一个不错的选择。

Answer 1

我正在尝试输入数字（打开一个数字）移动键盘+上下箭头）并使其像搜索一样类型 - 添加＆＃34; X＆＃34;在输入之前，如果里面有数据

您有两个选项：

拥有input type=search并为其定义pattern属性。通过这种方式，它将在手机上触发数字键盘，解决您的第一个数字要求。但是，它不会显示上下旋转器。如果你没有旋转器，那么这是最简单的选择。只需将input标记为：<input type="search" pattern="\d*" />。 pattern \d*将强制验证程序仅接受数字。您可以根据用例设计此正则表达式。
您可以使用input type=number，这将解决您的两个号码问题。它将触发数字键盘以及显示微调器。这是一种数字类型，如果提交了非数字值，也会自动触发验证器。但是，要使其行为类似于search框，您必须使用额外的span和一些CSS来破解交叉。此外，当点击交叉时，您需要一些Javascript来清除input。

这是两个选项的一个非常粗略的例子。另请注意，这可能不是真正的跨浏览器解决方案。例如，IE很乐意忽略type=number，并在右侧显示交叉。

演示小提琴：http://jsfiddle.net/abhitalks/hgn7roje/

演示代码段 ：

＆＃13;

$("span.closer").on("click", function(e) {
    if (e.target.tagName == 'SPAN') {
        $(this).children("input").val('');
    }    
});

＆＃13;

span.closer {
    display: inline-block;
    position: relative;
}
span.closer::before {
    content: '×'; font-weight: bold;
    position: absolute; cursor: pointer;
    left: 4px; top: 2px;
}
span.closer:hover::before {
    color: #00f;
}
input[type=number] {
    padding-left: 16px;
    width: 220px;
}
input[type=number]:invalid {
    border: 1px solid red;
}
input[type=search] {
    width: 240px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label>Option 1: </label>
    <input type="search" pattern="\d*" />
    <input type="submit" value="Search" />
</form>
<br />
<form>
    <label>Option 2: </label>
    <span class="closer"><input type="number" /></span>
    <input type="submit" value="Search" />
</form>

＆＃13;

输入类型编号和搜索组合

1 个答案: