gpt4 book ai didi

html - 使用 css 添加禁用增量的数字类型输入字段不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 08:34:44 25 4
gpt4 key购买 nike

我想要一个 html 格式的 input 字段,它将仅接受 number input(including decimal)并禁用增量。我使用了以下内容:

/* Hide Spin arrows on input type number */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0;
/* <-- Apparently some margin are still there even though it's hidden */
}

input[type="number"] {
-moz-appearance: textfield;
}
<input class="form-control" type="number" name="phone">

这在 Google Chrome 上完美运行,没有任何问题。但是,它不适用于 Firefox。有谁知道我哪里做错了吗?还有其他想法可以解决这个问题吗?

谢谢,

最佳答案

尝试使用

input[type=number] {
-moz-appearance:textfield;
}

但是,使用 input type='number' 永远无法确保在 firefox 中输入的是数字。如果是 firefox,则必须编写自定义验证函数。这是一个例子。

<!DOCTYPE html>
<html>

<head>
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield; /*This is for firefox*/
}
</style>
<script>
//Custom number validating function
function isNumber(evt) {
var iKeyCode = (evt.which) ? evt.which : evt.keyCode
if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
return false;

return true;
}
</script>
</head>

<body>
<input type="number" name="phone" onkeypress="javascript:return isNumber(event)">
</body>

</html>

关于html - 使用 css 添加禁用增量的数字类型输入字段不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44559737/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com