如何自动格式化文本框输入

Posted 2023-02-22

【中文标题】如何自动格式化文本框输入

【英文标题】：How to auto format textbox inputs

【发布时间】：2013-11-11 15:19:19

【问题描述】：

<tr>
   <td><label>Birthdate</label>
      <input type="text" placeholder="mm/dd/yyyy" name="birthdate" maxlength="10"/>
   </td>
</tr>

好吧，我的代码正在运行，但我希望我的“输入类型文本”像日期一样自动格式化（html 5 输入类型=日期），因为在我的 Servlet 中我将它转换为年龄。 问题是，如果我使用“input type=date”转换是错误的，所以我决定使用“input type=text”并且它正在工作。那么是否可以以这种格式“mm/dd/yyyy”自动输入“/”？例如，如果用户输入 2 个字符，“/”将自动输入等。

---

从生日到年龄的 Servlet

        String birthdate = request.getParameter("birthdate");


        int monthDOB = Integer.parseInt(birthdate.substring(0, 2));
        int dayDOB = Integer.parseInt(birthdate.substring(3, 5));
        int yearDOB = Integer.parseInt(birthdate.substring(6, 10));

        DateFormat dateFormat = new SimpleDateFormat("MM");
        java.util.Date date = new java.util.Date();
        int thisMonth = Integer.parseInt(dateFormat.format(date));

        dateFormat = new SimpleDateFormat("dd");
        date = new java.util.Date();
        int thisDay = Integer.parseInt(dateFormat.format(date));

        dateFormat = new SimpleDateFormat("YYYY");
        date = new java.util.Date();
        int thisYear = Integer.parseInt(dateFormat.format(date));

        int calAge = thisYear - yearDOB;

        if (thisMonth < monthDOB) 
            calAge = calAge - 1; 
        

        if (thisMonth == monthDOB && thisDay < dayDOB) 
            calAge = calAge - 1;
        

        String age = Integer.toString(calAge);

---

在表格中更新

<tr>
    <td><label for="inputName">Birthdate</label>
       <input type="text" placeholder="mm/dd/yyyy" id="input_date" name="birthdate" maxlength="10"  />
    </td>
</tr>

在源中更新

<script src="../scripts/formatter.js"></script>
<script src="../scripts/formatter.min.js"></script>
<script src="../scripts/jquery.formatter.js"></script>
<script src="../scripts/jquery.formatter.min.js"></script>

添加脚本

<script>
     $('#input_date').formatter(
       'pattern': '99/99/9999',
       'persistent': true
     );
</script>

我也尝试了javascript，但它不起作用......

【问题讨论】：

如果可能的话，如果字符 a-z 或数字以外的东西将被禁用...

【参考方案1】：

user2897690 有正确的想法，但它不接受 Numpad 数字。所以拿了他们的javascript并修改它来工作。

这是我对他们代码的解释以及添加的功能。

$("input[name='birthdate']:first").keyup(function(e)
    var chars = [48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105];
    var key=chars.indexOf(e.keyCode);
    console.log(key);
    if(key==-1)$(this).val($(this).val().substr(0,$(this).val().length-1));
    var value=$(this).val();
    if(value.length==2||value.length==5)$(this).val($(this).val()+'/');
);

【参考方案2】：

我有一个与 jquery-ui datepicker 一起工作的替代方案，没有 formatter.js。它旨在从keyup 和change 事件中调用。它添加了零填充。它通过从 dateFormat 字符串构造表达式来处理各种支持的日期格式。我想不出少于三个替换的方法。

// Example: mm/dd/yy or yy-mm-dd
var format = $(".ui-datepicker").datepicker("option", "dateFormat");

var match = new RegExp(format
    .replace(/(\w+)\W(\w+)\W(\w+)/, "^\\s*($1)\\W*($2)?\\W*($3)?([0-9]*).*")
    .replace(/mm|dd/g, "\\d2")
    .replace(/yy/g, "\\d4"));
var replace = "$1/$2/$3$4"
    .replace(/\//g, format.match(/\W/));

function doFormat(target)

    target.value = target.value
        .replace(/(^|\W)(?=\d\W)/g, "$10")   // padding
        .replace(match, replace)             // fields
        .replace(/(\W)+/g, "$1");            // remove repeats

https://jsfiddle.net/4msunL6k/

【参考方案3】：

使用来自 jquery 的 datepicker api 这是链接Datepicker

这是工作代码

<tr>
   <td><label>Birthdate</label>
      <input type="text" placeholder="mm/dd/yyyy" name="birthdate" id="birthdate" maxlength="10"/>
   </td>
</tr>

<script>
  $(function() 
    $( "#birthdate" ).datepicker();
  );
</script>

编辑

$("input[name='birthdate']:first").keyup(function(e)
    var key=String.fromCharCode(e.keyCode);
    if(!(key>=0&&key<=9))$(this).val($(this).val().substr(0,$(this).val().length-1));
    var value=$(this).val();
    if(value.length==2||value.length==5)$(this).val($(this).val()+'/');
);

这是您可能需要的代码

这里是fiddled code

【讨论】：

您可以使用 jquery .keyup() 函数在 2 个字符后自动输入 /

@Ghost 是的，上一个代码中有一些小故障，现在检查，编辑并添加小提琴，你可以在那里检查！

确保<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>首先包含最新版本的jquery，然后运行它，检查我提供的小提琴链接，我的代码在那里正常工作

在 jsfiddle.net 上创建您的代码并保存并在此处发布链接，并确保您没有在其他任何地方使用过 name="birthdate"

您没有在代码中添加 jquery，转到左侧面板并从第一个下拉菜单中添加 jquery 1.10.1，再次运行，等待页面完全加载然后检查，它运行良好。

【参考方案4】：

我一直在 GitHub 上观看一个名为 formatter.js http://firstopinion.github.io/formatter.js/demos.html 的项目（并提供反馈以改进它），这可能正是您正在寻找的东西。

这不会阻止您输入像 5 月 53 日这样的日期...但它会帮助您格式化。

new Formatter(document.getElementById('date-input'), 
  'pattern': '99/99/9999',
  'persistent': true
);

或

$('#date-input').formatter(
  'pattern': '99/99/9999',
  'persistent': true
);

【讨论】：

我下载了文件并将 id="date-input" 放在“输入类型=文本”中，还在脚本中添加了脚本源和答案，但它不起作用。这是为什么呢？

我不完全确定...我可能需要查看实际代码。

无论您使用哪种 JS 代码，您都应该只需要 1 个 JavaScript 文件……看起来您一遍又一遍地包含多个副本。如果您尝试使用 formater.js 库，您只需要包含缩小版本“formatter.min.js”。接下来，您添加了代码以在“jQuery 样式”中应用格式化程序...您是否已经加载了 jQuery...如果是，是什么版本（以防发生冲突）

版本... jQuery 2.0.3