可能用不到的js总结帖

1.不提示直接关闭网页窗口

<input type="button" name="" id="" value="关闭窗口" />

document.getElementsByTagName('input')[0].addEventListener('click',function () {
    window.opener = null;
    window.open('','_self');
    window.close();
});

 2.实现文本框高度自适应

给文本输入框设置一个最小高度,当用户输入的内容超过文本输入框的高度,让文本输入框的高度自动变化,不出现滑块.

<div class="ta_box">
    <textarea class="ta"></textarea>
</div>

.ta_box{
    width: 400px;
    height: auto;
    overflow: hidden;
    border: 1px solid #999;
    box-sizing: border-box;
}
.ta{
    min-height: 30px;
    outline: none;
    resize: none;
    width: 500px;
    box-sizing: border-box;
    vertical-align: top;
    border: none;
}

$.fn.autoHeight = function () {
    function autoHeight (elem) {
        elem.style.height = 'auto';
        elem.scrollTop = 0;  //防抖动
        elem.style.height = elem.scrollHeight + 'px';
    }
    this.each(function () {
        autoHeight(this);
        $(this).on('keyup',function () {
            autoHeight(this);
        });
    });
}
$('textarea').autoHeight();

这里的代码需要引用JQ,而结构之中最外层的.ta_box是为了消除滑块,优化用户体验.

这里用到了JQ的扩展函数...

3.鼠标的移入移出事件总结

要做一个下图的效果:

利用的是鼠标移入移出事件,然后做一个动画效果,而移入移出事件无非就是mouseover--mouseout,mouseenter--mouseleave,

如果你用的是mouseover-mouseout来做如上效果的话,就会出现这种情况.

该效果与预想有很大的偏差,这是因为:

mouseover：鼠标指针位于一个元素的外部，然后用户将其首次移入另一个元素边界之内是触发。

mouseout：鼠标指针位于一个元素上方，然后将其移入另一个元素时触发，这个元素可以位于前一个元素的外部，也可能是这个元素的内部。

这样的话,当用户移入元素之内时,触发mouseover事件,遮罩层上移,而这时候,尽管手表没有动,但是遮罩层向上移动,相当于鼠标移入了遮罩层,正符合mouseout"移入另一个元素时触发"的条件,这时就会触发mouseout事件,

正确的做法是采用mouseenter--mouseleave,这两个事件在鼠标移入后代元素时不会被触发.

4.input和propertychange事件

在一些项目中,我们有时会需要对input一类的元素进行即时监控,(前面我写的项目中,有用到).

首先,先来说说change和propertychange.

change是在内容改变(两次内容可能一样)且失焦之后触发,而propertychange是即时触发,每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件是IE专有.

再来说说input和propertychange的区别

input是IE浏览器之外的大多数浏览器支持的事件,在value改变时触发,但是通过js改变value值时不会触发.而propertychange是任何属性改变都会触发,且是IE浏览器专用,注:input是只在value发生改变时触发

总结input和propertychange的特点

input:

1.只有value改变时,触发

2.js改变value值不会触发

3.从浏览器的自动下拉提示中选取时，不会触发

4.除了IE浏览器,大多数浏览器都支持

propertychange:

1.任何属性发生改变都会触发

2.js改变value值也会触发

3.是IE浏览器专用

所以,绑定事件时,可以一块写上,例如:$(ele).on('input propertychange',fn);

5.js验证input输入框

<input type="text" name="tx" id="tx" value="" />

　　<1>只能输入英文

$('#tx').on('input propertychange',function () {
    var that = $(this),
        tx = that.val(),
        newTx = tx.replace(/[^a-zA-Z]/g,'');
    that.val(newTx);
});

　　<2>只能输入数字

$('#tx').on('input propertychange',function () {
    var that = $(this),
        tx = that.val(),
        newTx = tx.replace(/\D/g,'');
    that.val(newTx);
    return false;
});

　　<3>只能输入数字和.

$('#tx').on('input propertychange',function () {
    var that = $(this),
        tx = that.val(),
        newTx = tx.replace(/[^\d\.]/g,'');
    that.val(newTx);
    return false;
});

　　<4>只能输入汉字

$('#tx').on('input propertychange',function () {
    var that = $(this),
        tx = that.val(),
        newTx = tx.replace(/[^\u4E00-\u9FA5]/g,'');
    that.val(newTx);
    return false;
});

6.parse和contextmenu事件

$('#tx').on('paste',function (event) {
　　//event.preventDefault();  二选一皆可
    return false;
});

粘贴失效.

$('#tx').on('contextmenu',function (event) {
　　//event.preventDefault();  二选一皆可
    return false;
});

右键失效,不会弹出选项列表