CSS

Input的size、maxlength区别

size设置最大可见字符、maxlength设置最多输入的字符

Input的disabled、readOnly区别

Disabled文字会变成灰色，不可编辑，无法使用和无法点击，不能提交表单，不能获取焦点，对于所有的表单元素都有效，可用readonly代替，只能通过脚本进行修改value属性background-color:#cccccc;加上灰色背景色就可以

readOnly Disabled文字不会变成灰色，不可编辑，可以选中或拷贝其文本，能提交表单，可以聚焦焦点，只针对input(text / password)和textarea有效，只能通过脚本进行修改value属性

WdatePicker时间范围控制  

注：
日期框设置为disabled时,禁止更改日期(不弹出选择框)
设置readOnly属性,可指定日期框是否只读
设置highLineWeekDay属性,可指定是否高亮周末
设置isShowOthers属性,可指定是否显示其他月的日期
加上class=”Wdate”就会在选择框右边出现日期图标
通过skin属性,可以为每个日期控件单独配置皮肤

　动态限制:
  你可以通过系统给出的动态变量,如%y(当前年),%M(当前月)，%d（当前日），%ld（本月最后一天），%H（当前时），%m（当前分），%s（当前秒）等来限度日期范围

  还可以通过#{}进行表达式运算,如:#{%d+1}表示明天，可通过# F{}进行脚本自定义限制，{}之间是函数可写自定义JS代码

• 只能选择今天以后的日期(不包括今天)

　<input id=”d422″ type=”text” onfocus=”WdatePicker({minDate:’%y-%M-#{%d+1}’})”/>

• 只能选择本月的日期1号至本月最后一天

 <input id=”d423″ type=”text” onfocus=”WdatePicker({minDate:’%y-%M-01′,maxDate:’%y-%M-%ld’})”/>

• 只能选择今天7:00:00至明天21:00:00的日期

 <input id=”d424″ type=”text” onfocus=”WdatePicker({dateFmt:’yyyy-M-d H:mm:ss’,minDate:’%y-%M-%d 7:00:00′,maxDate:’%y-%M-#{%d+1} 21:00:00′})”/>

• 只能选择 20小时前至 30小时后的日期

 <input id=”d425″ type=”text” onClick=”WdatePicker({dateFmt:’yyyy-MM-dd HH:mm’,minDate:’%y-%M-%d #{%H-20}:%m:%s’,maxDate:’%y-%M-%d #{%H+30}:%m:%s’})”/>

　脚本自定义限制:
  系统提供了$dp.$D和$dp.$DV这两个API来辅助你进行日期运算,此外你还可以通过在 #F{} 中填入你自定义的脚本,做任何你想做的日期限制

  使用 $dp.$D 函数 可以将日期框中的值,加上定义的日期差量:
  两个参数: id={字符类型}需要处理的文本框的id值 , obj={对象类型}日期差量

  日期差量用法:属性y,M,d,H,m,s分别代表年月日时分秒

• 前、后日期互相限制

<tr>
    <td align='center'><B>开班时间:</B></td>
    <td><input id="mStartDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'mEndDate\')}'})" class="Wdate" size="20" 
        type="text" value="${(model.mStartDate?string("yyyy-MM-dd"))!}"></td> 
</tr> 
<tr> <td align='center'><B>结班时间:</B></td> 
    <td><input id="mEndDate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'mStartDate\')}',skin:'whyGreen'})" class="Wdate" size="20" 
　　　　 value=" type="text" /></td>
</tr>

• 前面的日期+3天 不能大于 后面的日期

<input type=”text” id=”start″ onFocus=”WdatePicker({maxDate:’#F{$dp.$D(‘end′,{d:-3});}’})”/>

<input type=”text” id=”end″ onFocus=”WdatePicker({minDate:’#F{$dp.$D(‘start′,{d:3});}’})”/>

控制input输入类型    

只能输入和粘贴汉字 

<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"    
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"><br/>

只能输入和粘贴数字 

<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" /><br/>

数字脚本 

<input onkeyup="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}"><br/>

只能输入数字和英文 

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

简易禁止输入汉字  

<input style="ime-mode:disabled">输入法不转换，但可粘贴上<br/>

输入数字和小数点 

<input onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" />

只能数字和"-",例如在输入时间的时候可以用到 

<input onkeyup="value=value.replace(/[^\w&=]|_/ig,'')" onblur="value=value.replace(/[^\w&-]|_/ig,'')" />

取消按钮按下时的虚线框,在input里添加属性值 hideFocus 或者 HideFocus=true 

<input type="submit" value="提交" hidefocus="true" />

防止退后清空的TEXT文档(可把style内容做做为类引用) 

<input type="text" style="behavior:url(#default#savehistory);" />

ENTER键可以让光标移到下一个输入框 

<input type="text" onkeydown="if(event.keyCode==13)event.keyCode=9" />

只能为中文(有闪动) 

<input type="text" onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9" />

只能为数字(有闪动) 

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

只能为数字(无闪动) 

<input type="text" style="ime-mode:disabled"
onkeydown="if(event.keyCode==13)event.keyCode=9" onkeypress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false" />

 只能输入英文和数字(有闪动) 

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

屏蔽输入法 

<input type="text" name="url" style="ime-mode:disabled"onkeydown="if(event.keyCode==13)event.keyCode=9" />

只能输入 数字，小数点，减号（-） 字符(无闪动)  

<input onkeypress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false" />

 只能输入两位小数，三位小数(有闪动) 

<input type="text" maxlength="9"
onkeyup="if(value.match(/^/d{3}$/))value=value.replace(value,parseInt(value/10)) ;value=value.replace(//./d*/./g,'.')"
onkeypress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 || value.match(/^/d{3}$/) 
               || //./d{3}$/.test(value)) {event.returnValue=false}" />

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

<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" />

 

只能输入数字

<input type="text" style="ime-mode:disabled;" onpaste="return false;"  onkeypress="keyPress()"/> 
function keyPress() {   
    var keyCode = event.keyCode;   
    if ((keyCode >= 48 && keyCode <= 57)){   
        event.returnValue = true;   
    } else {   
        event.returnValue = false;   
   }   
}      
注意：style:ime-mode:disabled表示不能切换输入法 onpaste="return false;" 表示不能粘贴 

只能输入大于0的整数

<input type="text" onkeyup="this.value=this.value.replace(/\D|^0/g,'')" onafterpaste="this.value=this.value.replace(/\D|^0/g,'')" />

正数、小数点

<input type="text" onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" />

记住密码后，取消表单自动填充密码 

//谷歌
<input type="password" autocomplete="new-password" />    
//360浏览器
<input autocomplete="new-password" readonly onfocus="this.removeAttribute('readonly');" type="password"  name="password" id="password" />

点击图片实现放大效果

<div id='image_div' >
　　<a href='javascript:;'>
　　　　<img class='littleimage' title='点击显示大图' src='"+ url[i] +"' height='75px' width='75px' />
　　</a>
</div>    
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:9999;width:100%;height:100%;display:none;">
　　<a href='javascript:;'>
　　　　<div id="innerdiv" style="position:absolute;top: 10%;left:10%;width: 80%;height: 80%;">
　　　　　　<img id="bigimg" style="width: 100%;height: 100%;" src="" />
　　　　</div>
　　</a>
</div>

$(".littleimage").click(function(){//点击小图放大图片
　　var src = $(this).attr("src");
　　$(bigimg).attr("src", src);
　　$('#outerdiv').css('display','block');
});

$('#bigimg').click(function () {//点击大图隐藏图片
　　$('#outerdiv').css('display','none');
　　$(bigimg).attr("src", '');
});