一、字符串过长,需要用省略号代替超出长度的那串?
之前一直是用vm在判断字符串个数来做,虽然可以实现,但是体验不好,因为中文和英文的长度不一样,这时候如果用样式来控制的话,就不存在这些问题了:
.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
这样只要再加上你想控制的长度样式,就可以实现这个简单的小功能啦~
二、自动换行
一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行。
解决方法(以IE,chrome,FF为测试浏览器):
{
word-break:break-all; /*支持IE,chrome,FF不支持*/
word-wrap:break-word;/*支持IE,chrome,FF*/
}
三、发送ajax请求,你要缓存吗?
如果客户端在请求一个文件的时候,发现自己缓存的文件有 Last Modified ,那么在请求中会包含 If Modified Since ,这个时间就是缓存文件的 Last Modified 。因此,如果请求中包含 If Modified Since,就说明已经有缓存在客户端。只要判断这个时间和当前请求的文件的修改时间就可以确定是返回 304 还是 200 。对于静态文件,例如:CSS、图片,服务器会自动完成 Last Modified 和 If Modified Since 的比较,完成缓存或者更新。
所以我们发送ajax请求的时候也要注意,如果你不希望走缓存的,记得加上cache:false,如:
$.ajax({
url:Bing.serverData.urls.addProductQuotation,
data:{
'supplyNoteItemId':supplyNoteItemId
},
cache:false,
dataType:'json'
}).done(function(res) {
......
)};
四、单选按钮的绑定事件
不要给单选按钮radio绑定click事件,浏览器兼容问题很蛋疼,调了一天的样式和JS得出的惨痛教训啊!要绑请绑change~
五、window.location
属性 描述
hash :设置或获取 href 属性中在井号“#”后面的分段。
host : 设置或获取 location 或 URL 的 hostname 和 port 号码。
hostname :设置或获取 location 或 URL 的主机名称部分。
href :设置或获取整个 URL 为字符串。
pathname :设置或获取对象指定的文件名或路径。
port :设置或获取与 URL 关联的端口号码。
protocol :设置或获取 URL 的协议部分。
search :设置或获取 href 属性中跟在问号后面的部分。
六、控制输入框只能输入数字
方法1:不让用户输入除数字以外的其他内容
$.fn.numeral=function(bl){//限制金额输入、兼容浏览器、屏蔽粘贴拖拽等
$(this).keypress(function(e){
var keyCode=e.keyCode?e.keyCode:e.which;
if(bl){//浮点数
if((this.value.length==0 || this.value.indexOf(".")!=-1) && keyCode==46) return false;
return keyCode>=48&&keyCode<=57||keyCode==46||keyCode==8;
}else{//整数
return keyCode>=48&&keyCode<=57||keyCode==8;
}
});
$(this).bind("copy cut paste", function (e) { // 通过空格连续添加复制、剪切、粘贴事件
if (window.Clipboard)//clipboardData.setData('text', clipboardData.getData('text').replace(/\D/g, ''));
return !Clipboard.getData('text').match(/\D/);
else
event.preventDefault();
});
$(this).bind("dragenter",function(){return false;});
$(this).css("ime-mode","disabled");
$(this).bind("focus", function() {
if (this.value.lastIndexOf(".") == (this.value.length - 1)) {
this.value = this.value.substr(0, this.value.length - 1);
} else if (isNaN(this.value)) {
this.value = "";
}
});
}
使用:$('#input-text').numeral(false);
方法2:输入之后判断是否是数字,如果不是,将内容全部清空
$('#input-text').keydown(function(event){
if ($.browser.msie){ // 判断浏览器
if ( ((event.keyCode > 47) && (event.keyCode < 58)) || (event.keyCode == 8) || (event.keyCode == 86)) { // 判断键值
return true;
} else {
return false;
}
}else{
if( ((event.which > 47) && (event.which < 58)) || (event.which == 8) || (event.which == 86) ) {
return true;
} else{
return false;
}
}
}).focus(function(){
this.style.imeMode='disabled';
}).bind("paste",function(){
}).keyup(function(e){
var _v= $("#input-text").val();
for(var _i=0;_i<_v.length;_i++){
var _c=_v.charAt(_i);
if(isNaN(_c)){
$("#input-text").val("");
return;
}
}
});