Question

我正在处理日期输入自动格式化解决方案。我使用的代码在斜杠之前和之后添加了一个空格（例如：02/02/2006。我试图避免这种行为。因此，日期格式为02/02/2006。

我还使用事件委派来使所有输入上的日期格式处于活动状态。

实际上，我尝试了一种解决方案来停用空间添加。但修改并不允许控制输入删除日期。

＆＃13;

function remove_details($string) {
        $patterns = array();
        $patterns[0] = '/([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)/';
        $patterns[1] = '/([0-9]+[\- ]?[0-9]+)/';
        $replacements = array();
        $replacements[0] = '*****';
        $replacements[1] = '*****';
        $descf = preg_replace($patterns, $replacements, $string);
            return $descf;
    }

＆＃13;

function checkValue(str, max) {
  if (str.charAt(0) !== '0' || str == '00') {
    var num = parseInt(str);
    if (isNaN(num) || num <= 0 || num > max) num = 1;
    str = num > parseInt(max.toString().charAt(0)) && num.toString().length == 1 ? '0' + num : num.toString();
  };
  return str;
};
  
function dateInput(date) {  // date is input object argument
  var input = date.value;
  if (/\D\/$/.test(input))
    input = input.substr(0, input.length - 3);
  var values = input.split('/').map(function(v) {
    return v.replace(/\D/g, '')
  });
  if (values[0]) {
    values[0] = checkValue(values[0], 12);
  }
  if (values[1]) {
    values[1] = checkValue(values[1], 31);
  }
  var output = values.map(function(v, i) {
    return v.length == 2 && i < 2 ? v + ' / ' : v;
  });
  date.value = output.join('').substr(0, 14);
}

function dateBlur(date) {  // date is input object argument
  var input = date.value;
  var values = input.split('/').map(function(v, i) {
    return v.replace(/\D/g, '')
  });
  var output = '';
  if (values.length == 3) {
    var year = values[2].length !== 4 ? parseInt(values[2]) + 2000 : parseInt(values[2]);
    var month = parseInt(values[0]) - 1;
    var day = parseInt(values[1]);
    var d = new Date(year, month, day);
    if (!isNaN(d)) {
      document.getElementById('result').innerText = d.toString();
      var dates = [d.getMonth() + 1, d.getDate(), d.getFullYear()];
      output = dates.map(function(v) {
        v = v.toString();
        return v.length == 1 ? '0' + v : v;
      }).join(' / ');
    }
  }
  date.value = output;
}
// delegate event handling from the form element

var form = document.getElementById("form");
form.addEventListener("blur", function(e) {
  if(e.target.dataset.type == "date") {
    dateBlur(e.target);
  }
},false);
form.addEventListener("input", function(e) {
  if(e.target.dataset.type == "date") {
    dateInput(e.target);
  }
}, false);

＆＃13;

html {
  box-sizing: border-box;
  font-family: 'PT Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
*, 
*:before, 
*:after {
  box-sizing: inherit;
}
body {
    background-color: #f3f3f3;
}
form {
    width: 100%;
    max-width: 400px;
    margin: 60px auto;
}
form input {
    font-size: 30px;
    padding: 0 20px;
    border: 2px solid #ccc;
    width: 100%;
    color: #666;
    line-height: 3;
    border-radius: 7px;
    font-family: 'PT Sans', sans-serif;
    font-weight: bold;
}
form input:focus {
    outline: 0;
}
form input.error {
    border-color: #ff0000;  
}
form label.error {
    background-color: #ff0000;
    color: #fff;
    padding: 6px;
    font-size: 11px;
}

label {
    color: #999;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05em
}
form small {
    color: #888;
    font-size: 1em;
    margin-top: 10px;
    display: block;
    align-self: ;
}

＆＃13;

Answer 1

首先，您需要删除＆＃39; /＆＃39; 并替换为＆＃39; /＆＃39; ，

您需要将 substr（0,14）更改为 substr（0,10）

您还可以在html输入框中指定 maxlength =＆＃34; 10＆＃34;

尝试以下摘录。

＆＃13;

function checkValue(str, max) {
  if (str.charAt(0) !== '0' || str == '00') {
    var num = parseInt(str);
    if (isNaN(num) || num <= 0 || num > max) num = 1;
    str = num > parseInt(max.toString().charAt(0)) && num.toString().length == 1 ? '0' + num : num.toString();
  };
  return str;
};
  
function dateInput(date) {  // date is input object argument
  var input = date.value;
  if (/\D\/$/.test(input))
    input = input.substr(0, input.length - 3);
  var values = input.split('/').map(function(v) {
    return v.replace(/\D/g, '')
  });
  if (values[0]) {
    values[0] = checkValue(values[0], 12);
  }
  if (values[1]) {
    values[1] = checkValue(values[1], 31);
  }
  var output = values.map(function(v, i) {
    return v.length == 2 && i < 2 ? v + '/' : v;
  });
  date.value = output.join('').substr(0, 10);
}

function dateBlur(date) {  // date is input object argument
  var input = date.value;
  var values = input.split('/').map(function(v, i) {
    return v.replace(/\D/g, '')
  });
  var output = '';
  if (values.length == 3) {
    var year = values[2].length !== 4 ? parseInt(values[2]) + 2000 : parseInt(values[2]);
    var month = parseInt(values[0]) - 1;
    var day = parseInt(values[1]);
    var d = new Date(year, month, day);
    if (!isNaN(d)) {
      document.getElementById('result').innerText = d.toString();
      var dates = [d.getMonth() + 1, d.getDate(), d.getFullYear()];
      output = dates.map(function(v) {
        v = v.toString();
        return v.length == 1 ? '0' + v : v;
      }).join('/');
    }
  }
  date.value = output;
}
// delegate event handling from the form element

var form = document.getElementById("form");
form.addEventListener("blur", function(e) {
  if(e.target.dataset.type == "date") {
    dateBlur(e.target);
  }
},false);
form.addEventListener("input", function(e) {
  if(e.target.dataset.type == "date") {
    dateInput(e.target);
  }
}, false);

＆＃13;

html {
  box-sizing: border-box;
  font-family: 'PT Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
*, 
*:before, 
*:after {
  box-sizing: inherit;
}
body {
    background-color: #f3f3f3;
}
form {
    width: 100%;
    max-width: 400px;
    margin: 60px auto;
}
form input {
    font-size: 30px;
    padding: 0 20px;
    border: 2px solid #ccc;
    width: 100%;
    color: #666;
    line-height: 3;
    border-radius: 7px;
    font-family: 'PT Sans', sans-serif;
    font-weight: bold;
}
form input:focus {
    outline: 0;
}
form input.error {
    border-color: #ff0000;  
}
form label.error {
    background-color: #ff0000;
    color: #fff;
    padding: 6px;
    font-size: 11px;
}

label {
    color: #999;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.05em
}
form small {
    color: #888;
    font-size: 1em;
    margin-top: 10px;
    display: block;
    align-self: ;
}

＆＃13;

<form id="form" method="post" action="">
  <label for="amount">Date</label>
  <input type="text" id="date1" data-type="date" maxlength="10"/>
  <small>Enter date as Month / Day / Year</small>
  </br>
  <label for="amount">Date 2</label>
  <input type="text" id="date2" data-type="date" maxlength="10"/>
  <small>Enter date as Month / Day / Year</small>
  </br>
  <label for="amount">Date 3</label>
  <input type="text" id="date3" data-type="date" maxlength="10" />
  <small>Enter date as Month / Day / Year</small>
  
</form>

＆＃13;

使用Javascript进行数据输入自动格式化

1 个答案: