Question

我有一个屏蔽zip字段的要求，因此它允许使用经典的5位数字zip（XXXXX）或5 + 4格式（XXXXX-XXXX）。

我可以这样：

$('#myZipField').mask("?99999-9999");

但复杂性来自于如果用户只输入5位数字，则不应显示破折号。

这是我到目前为止所提出的最好的 - 我可以将它扩展为在插入第6位时自动插入短划线但是这个问题在删除时会很有趣（我可以阻止它们删除短划线但它会修补补丁等等，它变成了一场噩梦）：

$.mask.definitions['~']='[-]';
$("#myZipField").mask("?99999~9999", {placeholder:""});

是否有开箱即用的方式或我必须自己动手？

Answer 1

您不必使用其他插件。只需移动问号，即可代替：

$('#myZipField').mask("?99999-9999");

你应该使用：

$('#myZipField').mask("99999?-9999");

毕竟，整个字符串都不是可选的，只有-及以后。

Answer 2

如果您已经使用jQuery，可能有数百个掩码等插件，例如： http://www.meiocodigo.com/projects/meiomask/

所以我认为你不必自己动手

Answer 3

这个邮政编码实际上很简单，但是当你有一个更复杂的格式来处理时，这就是用插件解决的问题（来自demo page）：

using System;
using Awesome;
using Xamarin.Forms;
using Xamarin.Forms.Maps;
using System.Collections.ObjectModel;
using System.Collections.Generic;
using Plugin.Geolocator;
using System.Threading.Tasks;

namespace KiLa
{
    public class KidsFinder : ContentPage, ITabPage
    {
        public string TabIcon => FontAwesome.FAMapMarker;
        public string SelectedTabIcon => FontAwesome.FAMapMarker;
        private Boolean _showKidsList;
        private ListView _listView;
        public ObservableCollection<KidsViewModel> kidsList = new ObservableCollection<KidsViewModel>();

        public KidsFinder ()
        {

            Title = "KidsFinder";
            // Define listView

            // Any near/identified kids? Mockup
            // TODO: get real data
            Boolean kidsPresent = true;

            // Initial height of map
            double mapHeight = 300.0;

            // coordinates of Beuth Hochschule, Haus Gauss
            double latitude = 52.543100;
            double longitude = 13.351450;

            // Show/hide kidsList (listView)
            //Boolean showKidsList = false;
            _showKidsList = false;

            // Define toggleButton
            Button toggleButton = new Button();
            toggleButton.Text = "Verstecke Liste";

            toggleButton.Clicked += new EventHandler(OnClickEvent);

            if(kidsPresent == true) 
            {
                toggleButton.IsVisible = true;
                mapHeight = 200.0;
                _showKidsList = true;
            } else 
                {
                    toggleButton.IsVisible = false;
                    mapHeight = 300.0;
                    _showKidsList = false;
                }

            // Mockup some kids
            Position pos1 = new Position(latitude + 0.002, longitude + 0.002);
            Position pos2 = new Position (latitude - 0.002, longitude - 0.002);
            kidsList.Add(new KidsViewModel{Name="Tim", ActualPositon=pos1, DistanceToEducator=5.4});
            kidsList.Add(new KidsViewModel{Name="Sabine", ActualPositon=pos2, DistanceToEducator=20.4});

            _listView = new ListView();
            _listView.ItemsSource = kidsList;
            //listView.VerticalOptions = LayoutOptions.FillAndExpand;
            _listView.ItemTemplate = new DataTemplate (typeof(KidsCustomCell));
            _listView.RowHeight = 50;

            if (_showKidsList == false) {
                _listView.IsVisible = false;
            } else {
                _listView.IsVisible = true;
            }

            // Define mapView
            var kidsMap = new KidsMap ();
            kidsMap.MapType = MapType.Street;
            kidsMap.WidthRequest = 960;
            kidsMap.HeightRequest = mapHeight;
            kidsMap.MoveToRegion(MapSpan.FromCenterAndRadius(new Position(latitude,longitude), Distance.FromMiles(0.3)));

            // Set label of pins with kids names,
            foreach (KidsViewModel kvm in kidsList) {
                Pin pin = new Pin() {
                    Label = kvm.Name,
                    Position = kvm.ActualPositon
                };
                    kidsMap.Pins.Add(pin);
            }

Answer 4

当您使用jQuery Inputmask插件并且要对邮政编码使用4或5位数字值时，应使用：

$('#myZipField').inputmask("9999[9]");

Answer 5

为什么不让字段透明，并在其背后有一个文本对象，表单为浅灰色？所以他们在后台看到了####### - ####，然后对它进行装配，以便字母在输入时消失。那时，它表明如果他们想要额外的四个，他们应该进入冲刺，对吧？然后，如果它们陷入困境并键入6个数字，你可以装配脚本自动插入连字符吗？

用于多种格式的jQuery zip屏蔽

5 个答案: