jquery 如何在剑道UI NumericTextBox上禁用点?

wi3ka0sx  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(104)

我需要使一个数字字段只接受整数,这样该字段就不接受小数。我甚至不希望字段近似,只是不接受点或逗号。
基于区域性,它接受数字分隔符(例如EN是点,IT是逗号)
下面是我尝试的代码

$("#numerictextbox").kendoNumericTextBox({
     culture: "en-US",
     step: 500,
     spinners: false,
     format: "#",
     decimals: 0
});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
 <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/cultures/kendo.culture.en-US.min.js?bust=v21"></script>
</head>
<body>
  
<input id="numerictextbox" />
</body>
</html>

在这里你可以找到链接到dojo与意大利文化的例子,在这种情况下,它阻止逗号

cgyqldqp

cgyqldqp1#

尝试使用restrictDecimals配置选项。

$("#numerictextbox").kendoNumericTextBox({
    culture: "en-US",
    step: 500,
    spinners: false,
    format: "#",
    decimals: 0,
    restrictDecimals: true
});

使用此配置,逗号和点的行为就像输入一个字母(红色感叹号 Flink )。
Example

7ivaypg9

7ivaypg92#

在为React的人发布这篇文章时,我在React中寻找解决方案时遇到了很多困难。
在React中,最好的方法是使用NumericTextBoxPropsContext
首先,我们需要决定NumericTextBox组件的格式和其他属性。

const NumericTextBoxProps = React.useCallback(
    (numericTextBoxProps) => ({
      ...numericTextBoxProps,
      format: '##'
    }),
    []
  );
  return props;

然后,我们可以在Kedno Grid或任何您在应用程序中使用此数字文本框的地方使用它。

import { NumericTextBoxPropsContext } from '@progress/kendo-react-inputs';

const App = () => {
  return (
    <div>
      <NumericTextBoxPropsContext.Provider value={NumericTextBoxProps}>
        <Grid></Grid>
      </NumericTextBoxPropsContext.Provider>
    </div>
  )
}

这将帮助您格式化网格中的数字文本框过滤器,或者根据我们如何 Package 应用程序中任何地方的数字文本框。
同样,我们也可以对所有过滤器(如日期文本框)执行此操作。

相关问题