Question

我正在使用devexpress控件，我有一个文本框，只能在一个连字符之间有数字，例如123-7898（7位和1个连字符），格式相同。

当用户自动输入前3位数时，连字符将在第4位输入，之后用户可以输入最后4位数。

请提供您的建议。

Answer 1

DevExpress编辑器允许您在编辑期间使用蒙版。请尝试将MaskSettings.Mask属性设置为"###-####"。在这种情况下，十进制数字可以留空。

通过文档了解如何设置这些遮罩和一个漂亮的online demo of masking将让您更好地了解。

参考Mask Editing Overview文档中的Devexpress编辑器控件的屏蔽功能。

Answer 2

您可以使用JavaScript解决此问题 -

<script>
    function validatePhoneNumber(txtBoxObj) {
        if (txtBoxObj.value.length == 3 ) {
            txtBoxObj.value += "-";
        }
    }
    function getValue() {
        var phoneNumber = document.getElementById("phoneNumber").value;
        var a = phoneNumber.replace(/-/g, "");
        alert(a);
    }
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

        return true;
    }

</script>


<input id="phoneNumber"onkeypress="return isNumberKey(event)"   onblur="validatePhoneNumber(this)" onkeyup="validatePhoneNumber(this)" type="text" maxlength="8"/>
<input type="button" onclick="getValue()"  title="submit" value="submit" />

如何制作仅包含数字和连字符的Devexpress texbox（123-7898）

2 个答案: