在文本框中,输入掩码在某一点自动输入指定字符的脚本

分享于 

4分钟阅读

Web开发

  繁體 雙語

介绍

有些时候创建表单时,我们喜欢使用一些叫做"输入掩码"的东西。 当你在中键入文本框时,输入掩码会自动将某些字符输入到文本框中。

例如:如果有一个文本框,它应该保存电话号码,而我希望电话号码像这样格式化,这样在第1 和第六个字符之后,输入掩码将自动输入字符,这样用户就不必执行它。

在我的脚本中,这些字符必须包含在。

脚本崩溃和解释

<form name="form" action="" method="post">
<input name="Field1" value="" type="text" 
onKeyUp="javascript:return mask(this.value,this,'3,6','-');"onBlur="javascript:return mask(this.value,this,'3,6','-');"style="font-family:verdana;font-size:10pt;width:110px;"maxlength="11"></form>

前 3行是( 希望) 自己理解的,但我将解释它们: iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 <窗体> 标签可以编辑,尽管所有需要编辑的是 action=""

iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 <输入> 标记被设置为调用名为 mask的JavaScript函数( below ),它将 4参数传递给函数,

  • str - 当前文本框控件的值,
  • textbox - 实际的文本框对象( 以便可以设置值)
  • loc - 要放置指定字符的多个位置的字符串,
  • delim - 要使用分隔符的字符( 分隔符)。

我想把 maxlength 值设置为 11,因为我想要 9字符和 2"-"字符。

在 2位置调用 mask 函数( 1: onKeyUp,因此,当用户键入时,字段将被编辑,2: onBlur,这不是必需的,但它只是为了以防万一)

下面是函数行的说明:

function mask(str,textbox,loc,delim){

以名称 mask 开始函数,并设置 4个参数,如下所述。

var locs = loc.split(','); 

从多个数字( 将每个分隔符添加到它的自身) 创建一个 array。

for (var i = 0; i <= locs.length; i++){

从位置的array 开始循环。

for (var k = 0; k <= str.length; k++){

从每个字符开始一个嵌套循环以检查分隔符是否已经存在。

if (k == locs[i]){

开始检查一个条件语句,以查看我们保存的字符数。

if (str.substring(k, k+1)!= delim){

如果保存的字符是正确字符位置,并且检查它与分隔符的字符是否相同,则开始嵌套条件语句。

str = str.substring(0,k) + delim + str.substring(k,str.length)

如果字符与分隔符不同,则将它的中的值切换为一个,并插入分隔符。

}
}
}
}
textbox.value = str

这将设置编辑的textbox控件的值

}

给你,完整的剧本。 如果你想测试该脚本,请点击这里。

结束语

函数中没有什么需要编辑,只需编辑调用该函数的文本框的最后 2个参数。

注释:

这里脚本在 Netscape 6 + 和 IE 4 + 中运行良好。 在 Netscape 4中,在编辑该字段之后,cursor 将转到字段( 这可以是固定的)的开头。


AUTO  文本  CHAR  BOX  输入  poi  
相关文章