英文:
Setting "max" on an Input with type "number" in Chakra-UI
问题
以下是您要翻译的内容:
"While building a user interface with a few inputs, I decided to migrate the base input components to form a single component I can use, while that's not really the problem. Here's the code for it. For easy and memorable use for Inputs."
"在构建具有一些输入的用户界面时,我决定将基本输入组件迁移到一个我可以使用的单个组件中,尽管这并不是真正的问题。以下是它的代码。用于输入的简单且易记的使用。"
import {
FormControl,
FormErrorMessage,
FormHelperText,
FormLabel,
Input,
} from "@chakra-ui/react";
const DefaultInput = ({
isInvalid,
label,
helperText,
errorMessage,
...otherProps
}) => {
return (
<FormControl isInvalid={isInvalid}>
{label && <FormLabel>{label}</FormLabel>}
<Input
variant="outline"
padding="25px 10px"
margin="10px 0px"
border="0px"
{...(isInvalid && { border: "0px" })}
{...otherProps}
/>
{!isInvalid ? (
<FormHelperText>{helperText}</FormHelperText>
) : (
<FormErrorMessage>{errorMessage}</FormErrorMessage>
)}
</FormControl>
);
};
export default DefaultInput;
"Used it like this but it doesn't seem to take notice of the 'max' property."
"像这样使用它,但似乎没有注意到 'max' 属性。"
<DefaultInput
value={custom.credits}
isInvalid={creditsError}
helperText="最低 50 积分。"
errorMessage="请输入大于 50 的有效数字。"
maxW={isNotSmallerScreen ? "50%" : "70%"}
fontSize={!isNotSmallerScreen ? "12px" : "16px"}
onChange={handleCustomCredit}
type="number"
placeholder="输入积分"
name="credits"
max="5000"
/>
"I've also tried manually declaring the 'max' and 'type' within the component I created but still nothing."
"我还尝试在我创建的组件中手动声明 'max' 和 'type',但仍然没有效果。"
.....
<Input
variant="outline"
padding="25px 10px"
margin="10px 0px"
border="0px"
max="5000"
type="number"
{...(isInvalid && { border: "0px" })}
{...otherProps}
/>
.....
英文:
While building a user interface with a few inputs, I decided to migrate the base input components to form a single component I can use, while that's not really the problem. Here's the code for it. For easy and memorable use for Inputs.
import {
FormControl,
FormErrorMessage,
FormHelperText,
FormLabel,
Input,
} from "@chakra-ui/react";
const DefaultInput = ({
isInvalid,
label,
helperText,
errorMessage,
...otherProps
}) => {
return (
<FormControl isInvalid={isInvalid}>
{label && <FormLabel>{label}</FormLabel>}
<Input
variant="outline"
padding="25px 10px"
margin="10px 0px"
border={"0px"}
{...(isInvalid && { border: "0px" })}
{...otherProps}
/>
{!isInvalid ? (
<FormHelperText>{helperText}</FormHelperText>
) : (
<FormErrorMessage>{errorMessage}</FormErrorMessage>
)}
</FormControl>
);
};
export default DefaultInput;
Used it like this but it doesn't seem to take notice of the "max" property.
<DefaultInput
value={custom.credits}
isInvalid={creditsError}
helperText={"Minimum of 50 Credits."}
errorMessage={"Please enter a valid number above 50."}
maxW={isNotSmallerScreen ? "50%" : "70%"}
fontSize={!isNotSmallerScreen ? "12px" : "16px"}
onChange={handleCustomCredit}
type="number"
placeholder="Enter Credits"
name="credits"
max="5000"
/>
I've also tried manually declaring the "max" and "type" within the component I created but still nothing.
.....
<Input
variant="outline"
padding="25px 10px"
margin="10px 0px"
border={"0px"}
max="5000"
type="number"
{...(isInvalid && { border: "0px" })}
{...otherProps}
/>
.....
答案1
得分: 1
这实际上是浏览器的一种怪癖,与 Chakra 无关。max
HTML5 属性实际上不会限制您在提交包含表单之前输入较大的数字。如果您希望实时限制输入,您需要构建自己的函数。
除非您在提交时也看不到任何内容?请参考应该看到的示例:https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_max_min。
英文:
This is actually a browser quirk and not related to Chakra. max
HTML5 attribute won't actually restrict you from typing larger numbers until you submit the containing form. If you want to limit it on the fly you have to build out your own function.
Unless you aren't seeing anything on submit either? See this example of what you should see https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_max_min.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论