如何仅使用JavaScript（jQuery）将文本框转换为日期或货币文本框？

我正在尝试只使用JavaScript和jQuery构建表单。对于其中一个文本框，我需要将其显示为日期。另一种是美国货币

我以前见过一些非常酷的表单，其中已经有了“/”符号，当您键入日期时，它完全符合符号，因此您不必键入它们。此外，我需要在单击按钮时以相同格式（mm/dd/yyyy）将其显示为日期。此外，不知何故，我需要它，如果没有输入日期，当按下按钮时，它不会显示任何内容

编辑：

好吧，在网上浏览之后，我找到了一个更好的方式来描述我想要的约会内容。它与HTML5完全相同

<input type="date">

但是，单击按钮后，我需要它显示为MM/DD/YYYY，HTML5只允许YYYY-MM-DD，这不是我想要的

---

那么，我如何构建一个与HTML5“日期”具有相同功能（我不需要日期选择器）但在单击按钮后显示格式为MM/DD/YYYY的文本框呢？

这种输入并不简单。你需要做一些技巧。首先是HTML：

<div id="dateInput">
    <input type="number" placeholder="MM" maxlength="2"/>/<input type="number" placeholder="DD" maxlength="2"/>/<input type="number" placeholder="YYYY" maxlength="4"/>
</div>

<div id="moneyInput">
    $<input type="number"/>
</div>

这里是最难的部分，Javascript/jQuery。一个人的钱应该是本地工作的，但是约会的时间需要一些工作

$('#dateInput').on('input', function(){
   //get max length of the input
   var maxLength = parseInt($(this).attr('maxlength'));
   //get the current value of the input
   var currentValue = $(this).val();
   //if the current value is equal to the maxlength
   if(maxLength == currentValue.length){
       //move to next field
       $(this).next().focus();
   };
});

按下按钮，从输入和显示中收集所有值

$('button').on('click', function(e){
    e.preventDefault();
    //set the variable to append ti
    var dateDisplay = '';
    //iterate over the inputs
    $('#dateInput input').each(function(){
       //if dateDisplay exists (will explain soon)
       if(dateDisplay && $(this).val() != ''){
           //append the value
           dateDisplay += $(this).val() + '/';
       } else {
           //if the value is blank, make the variable false.
           dateDisplay = false;
       };
    });

    //now check the variable
    if(dateDisplay){
        //if it's all good, remove the last character (/) and display
        alert(dateDisplay.slice(0,-1));
    }
    return false;
});

---

这不检查有效性，只处理一般用户体验。

我在网上和其他论坛浏览，发现了以下答案：

 $('#date').keyup(function(){
      if ($(this).val().length == 2){
           $(this).val($(this).val() + "/");
      }
      else if ($(this).val().length == 5){
           $(this).val($(this).val() + "/");
      }
  });

---

谢谢，但我只需要一个文本框，而不是分成3个不同的文本框。没有本机输入有斜杠。这就是您如何使其看起来像有斜杠。仅供参考，根据浏览器的不同，对

type=“date”

的支持也不同。

 $('#date').keyup(function(){
      if ($(this).val().length == 2){
           $(this).val($(this).val() + "/");
      }
      else if ($(this).val().length == 5){
           $(this).val($(this).val() + "/");
      }
  });