深入PHP许愿墙模块功能分析(4)


 <input type="text" onKeyUp="value=value.replace(/[^\d]/g,'')" />  \D表示匹配数字,中文输入法输入时,存在后续表格不能输入中文问题
 <input type="text" onKeypress="if(event.keyCode < 45 || event.keyCode >57) event.returnValue = false;">  不能输入字母,但能输入/.-等
 <INPUT TYPE="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" onpaste="return false">  不能输入数字,不允许粘贴
 <input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">
 <input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value)) execCommand('undo')"> 但可以输入空格,解决中文输入法问题


只能输入字母和汉字(还有一些非数字字符)

复制代码 代码如下:


 <input onkeyup="value=value.replace(/[\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">


小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号

复制代码 代码如下:


 <input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">


3,限制纸条内容的长度
在签写许愿内容时,通常需要限制用户输入文本的长度。在字符串长度的计算上,汉字是占两个字符(汉字的宽度以及存储所占的位置决定了一个汉字占两个字符),而英文字母和数字都被识别为一个字符。在PHP中获取字符串长度应用strlen()函数实现。但是在本模块中,为了能够实现统计许愿内容所允许输入的剩余字符数,这里就要重新输写计算中英文数字混合字符串长度的函数。在签写许愿内容时,实时限制字符数。
添加一个文本框,用来控制输入祝福纸条内容剩余的字节数。

复制代码 代码如下:


<INPUT readOnly maxLength=3 size=3 value=150 name=freeLength>


在上面的代码中,应用“freeLength”来实时输出祝福纸条内容所剩余的字符数。
添加一个编辑框用来输入祝福纸条的内容,添加onkeydown和onkeyup事件来触发javascript脚本自定义的函数textCounter(),用来限制该编辑输入的字符数,最多输入150个字符,如果许愿内容大于150,则自动删除,仅保留最大容量值。

复制代码 代码如下:


<textarea cols="66" rows="6"
 onkeydown="textCounter(this.form.content,this.form.freeLength,150)" 
 onkeyup="textCounter(this.form.content,this.form.freeLength,150)"
 onafterpaste="textCounter(this.form.content,this.form.freeLength,150)">
</textarea>


在上面的代码中,textCounter()函数有3个参数值,第一个参数值“this.form.content”是指输入的许愿内容;第二个参数值“this.form.freeLength”是指允许输入的许愿内容字符数;第三个参数“150”是输入许愿内容的最大容量值。

应用javascript脚本自定义一个函数textCounter(),控制祝福内容不能超过150个字符,这里需要注意的是,中英文所占的字节数不同。

DBCS是亚洲的字符集,包含ANSI(ANSI即ASCII码值为0~255之间的字符)。DBCS使用1个或者2个字节来表示一个字符集,超过256个字符则占用两个字节。当字符为ANSI时,存放于文件中只占用1个字节。如果非ANSI(大于256个字符),则占用两个字节。因此,这里就用三目运算符来分别计算英文数字和汉字所占用的字节数。当变量StrValue.charCodeAt(i)小于等于256时,按1个字节计算;大于256时按2个字节计算。

复制代码 代码如下:


function textCounter(field, countfield, maxlimit) {  //祝福内容限制在120个字符内
  var StrValue  = field.value;
   var ByteCount = 0;
 var StrLength = field.value.length;
 for (i=0;i<StrLength;i++){   //记算祝福文字个数,英文数字占1个字符,汉字占2个字
  ByteCount = (StrValue.charCodeAt(i)<=256) ? ByteCount + 1 : ByteCount + 2;
 }
 if(ByteCount<=maxlimit){
  strtemp=StrValue;
  document.getElementById('ContentSample').innerHTML = StrValue;
  countfield.value = maxlimit - ByteCount;
 }else{
  document.getElementById('content').innerHTML = strtemp;
 }
}


该函数只能限制显示部分150字节,但是输入框没有现在,而且粘贴超过150字节时,显示为空白。修改代码如下:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/a36cf8cd326a4ac9ed3b48298984555e.html