h5遇到的问题

最新推荐文章于 2020-07-14 08:26:52 发布

mqy1023

最新推荐文章于 2020-07-14 08:26:52 发布

阅读量763

点赞数

分类专栏： Web实战文章标签： h5

本文链接：https://blog.youkuaiyun.com/mqy1023/article/details/71012124

版权

Web实战专栏收录该内容

19 篇文章

订阅专栏

zepto 手机上的jquery
iscroll 处理ios万恶的滚动条
fastclick 解决手机上点击穿透的问题
hammer.js 多点触发手势库
flipsnap.js 手机屏幕水平滑动框架
Animate.css css3动画库
sencha touch、mui…
vue
phonegap / cordova

一、ios手机上传竖拍照片旋转90度问题

《利用exif.js解决ios手机上传竖拍照片旋转90度问题》
http://blog.youkuaiyun.com/linlzk/article/details/48652635

二、label文字两端对齐

http://output.jsbin.com/fehuzu

三、限制input输入类型(多种方法实现)

1.只能输入和粘贴汉字

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

3.只能输入和粘贴数字

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

5.数字脚本

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

6.只能输入数字和英文

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

8.简易禁止输入汉字

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

9.输入数字和小数点

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

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

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

限制input输入类型,参考链接

11、通过onkeypress事件是输不上任何非数字字符

<input type="text" onkeypress="return event.keyCode>=48&&event.keyCode<=57"  /> 
通过onkeyup事件是输上后再去掉非数字字符 
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'') ">

四、form表单提交后不刷新不跳转的实现方法

<html>    
  <body>    

  <form action="" method="post" target="nm_iframe">    
      <input type="text" id="id_input_text" name="nm_input_text" />    
      <input type="submit" id="id_submit" name="nm_submit" value="提交" />    
  </form>    

  <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>    

  </body>    
  </html>

在默认情况下，提交form表单后，是有刷新的。但是，有的时候，希望提交表单后不要刷新，免得把页面已经有的东东给刷跑了，那怎么搞呢（最近刚好碰到）？实例代码在上。

五、JQuery报错Uncaught TypeError: Illegal invocation的处理方法

加上processData: false
processData 默认为false; 当设置为true的时候,jQuery ajax 提交的时候不会序列化 data，而是直接使用data

$.ajax({
    url: 'xxxxxx',
    type: 'POST',
    data:{},
    async: true,
    cache: false,
    contentType: false,
    processData: false,
    ...
    ...
});

六、某标签下的元素垂直水平居中

设置该标签

position:absolute;width:auto;margin:10px auto;left:8vw;right:8vw;top:50%;
-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%)

七、上传base64注意事项

要将前缀去掉

img.src.replace("data:image/png;base64,","");

八、超出文字显示省略号…

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

九、遍历对象并显示数值

1、返回的值: var backRes = {“userName”: “haha”, “age”: 27};

<p name="userName"></p>
<p name="age"></p>

for(var value in backRes){
     $("[name="+value+"]").text(backRes[value]);
}

十设置上传input等全局去处理

在点击input去获取图片等文件资源时，需要将click点击函数处理放到全局，

window.onClickXXXX = function(e) {
}

十一、同页面下不同级联的样式元素所在下标位置

var indexSameClass = $('.xxxClass').index(this);

十二、获取form表单所有name属性的对象值

用于获取提交表格数据的所有的值

$.fn.serializeFormObject = function() {
    var objValue = {};
    var arr = this.serializeArray();
    $.each(arr, function() {
        if(objValue[this.name] !== undefined) {
            if(!objValue[this.name].push) {
                objValue[this.name] = [objValue[this.name]];
            }
            objValue[this.name].push(this.value || '');
        } else {
            objValue[this.name] = this.value || '';
        }
    });
    return objValue;
}