0

客户要求将包含电话号码数据的文本字段分成两部分——一个用于国家代码，另一个用于其余号码。

唉，这个字段是相当硬编码到系统中的，到目前为止收集的所有数据都作为一个合并字段（因此保存为数据库中的一列）。

因此，我认为最好的答案可能是执行以下操作：

  1. 使用 Javascript，将单个文本字段替换为两个文本字段。
  2. 然后，当用户单击提交按钮时，它们会合并回原始文本字段。
  3. 如果在从数据库中读取该字段时（即，当管理员查看条目时），是否有办法将该字段重新分成两个，则奖励标记。请注意，数据格式必须一致——我不想将现有的字符串数据与一堆 JSON 字符串混合在一起。

这是解决这个问题的最好方法吗？这种方法是否存在任何可预见的问题（除了用户没有启用 JavaScript）？是否有专门设计用于执行此类操作的 jQuery 插件？

我还需要在某个时候将其验证为有效的电话号码，但我自己可以弄清楚。

4

2 回答 2

2

您可以使用屏蔽输入 JQuery 插件，而不是将文本字段一分为二

http://digitalbush.com/projects/masked-input-plugin/

$(document).ready(function(){
   $("#phone").mask("(999)999999");                
});

示例 JS：http: //jsfiddle.net/vGeMV/3/

编辑：对于第 3 点：如果您想真正将数字分成两部分并显示它，您可以从右侧（通常为 7 位）而不是左侧拆分它，这样即使国家代码存在与否，您也会得到正确的分裂。

于 2012-11-21T16:23:52.410 回答
1

如果你不想使用插件，你可以随时查看我在jsFiddle上制作的这个片段

如果你想确保它在 JS 中工作，只需将 display:'none' 更改为 display:'block'

这是我的 JavaScript

$(function() {
    $('#phone').css({ display:'none' });
    $('#phone').after(') <input type="text" name="phoneMainNumber" id="phoneMainNumber" />').after('(<input type="text" value="555" name="phoneAreaCode" id="phoneAreaCode" style="width:30px;" />');
    bindChange();
});

function bindChange() {
    $('#phone').val('('+$('#phoneAreaCode').val()+') ');
    $('#phoneMainNumber, #phoneAreaCode').keyup(function() {
       $('#phone').val('('+$('#phoneAreaCode').val()+') '+$('#phoneMainNumber').val());    
    });   
}
于 2012-11-21T16:32:39.250 回答