Question

我希望每当我以XXXXXXXXXX格式在数字输入字段中输入数字时，都使用HTML，CSS和javascript作为xxx-xxx-xxx。

就像这个片段一样，但是不使用mask脚本。

$(function () {
    $('.phone_us').mask('000-000-0000');
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js" type="text/javascript"></script>
<!--mask script-->

<form id="form1" runat="server">
    <input type="text" class="phone_us" />
</form>

Answer 1

这里有一些可行的答案，但是这种解决方案更稳定。

使用<CollectionView Grid.Row="2" Grid.Column="0" x:Name="collectionViewItemsLayout" ItemsSource="{Binding BaseCustomersCards}" ItemTemplate="{StaticResource CustomerCardTemplateSelector}" > <CollectionView.ItemsLayout> <GridItemsLayout Orientation="Vertical" Span="5" /> </CollectionView.ItemsLayout> </CollectionView>事件进行即时替换和
在完整字符串上使用正则表达式以允许复制/粘贴：

  var idiom = DeviceInfo.Idiom;
            if (idiom == DeviceIdiom.Phone)
            {
                collectionViewItemsLayout.SetValue(GridItemsLayout.SpanProperty, 3);
            }

oninput

甚至没有jQuery：

$('.phone_us').on('input', function() {              //Using input event for instant effect
  let text=$(this).val()                             //Get the value
  text=text.replace(/\D/g,'')                        //Remove illegal characters 
  if(text.length>3) text=text.replace(/.{3}/,'$&-')  //Add hyphen at pos.4
  if(text.length>7) text=text.replace(/.{7}/,'$&-')  //Add hyphen at pos.8
  $(this).val(text);                                 //Set the new text
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="phone_us" maxlength="12">

Answer 2

您可以尝试这样

   $(document).ready(function () {

$(".phone_us").keyup(function (e) {
    var value = $(".phone_us").val();
    if (e.key.match(/[0-9]/) == null) {
        value = value.replace(e.key, "");
        $(".phone_us").val(value);
        return;
    }

    if (value.length == 3) {
        $(".phone_us").val(value + "-")
    }
    if (value.length == 7) {
        $(".phone_us").val(value + "-")
    }
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js" type="text/javascript"></script>
<!--mask script-->
 
<form id="form1" runat="server">
        <input type="text" maxlength="12" class="phone_us"/>
    </form>

Answer 3

您可以这样实现

  document.getElementById('txtphone').addEventListener('blur', function (e) {
        var x = e.target.value.replace(/\D/g, '').match(/(\d{3})(\d{3})(\d{4})/);
        e.target.value = '(' + x[1] + ') ' + x[2] + '-' + x[3];
    });txtphone

 <input type="text" class="phone_us" id="txtphone" placeholder = "(000) 000-0000"/>

Answer 4

<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>

使用HTML5 input type=tel获取电话号码，并使用pattern属性指定任何模式。

[0-9]{3}代表0-9数字和3个数字。
然后，添加连字符（-），然后再次使用数字模式。

您可以使用自己的模式和您所在国家/地区的明智模式，例如 [1-9]{4}-[1-9]{6}，格式为1234-567890。

使用HTML5中的min-length和max-length设置限制。

请注意，这些模式不会自动添加连字符，而只会允许使用正确格式的输入。

如果要获取更多模式，请在网上搜索或查看HTML5pattern.com

Answer 5

纯JavaScript。在输入字段中输入10位数字，然后单击输入字段之外的任何地方。

var myTel = document.getElementById("tel");
myTel.addEventListener("blur", function() {
    var str=myTel.value;
    var pattern=/[0-9]{10}/;
    if (pattern.test(str)) {
        newstr=str.slice(0,3)+'-'+str.slice(3,6)+'-'+str.slice(6,10);
        myTel.value=newstr;
    }
    else {
        // bad
        myTel.value='bad value: only 10 digits';
    }
})

<form>
        <input type="text" id="tel" name="tel" maxlength='10'>
</form>

如何在号码输入字段中以这种“ xxx-xxx-xxxx”格式输入电话号码

5 个答案: