零碎知识点

1.input自动获取焦点

<input autofocus="autofocus">

autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。

但是要是想通过动态的控制input获取焦点并不是给input动态的加这个属性而是直接用focus()方法

$('.input_box input').eq($index).focus();

2.input自动全选

$("#smsContent").focus(function(){  //当输入框获得焦点时，选择该元素中的文本    配合上面的focus()方法
    this.select();  
});

select() 方法用于选择该元素中的文本。

3.input获得焦点时默认value自动消失   失去焦点时默认value自动添加

<input name="keywords" type="text" value="关键字" onfocus="if(this.value == this.defaultValue) this.value = ''" onblur="if(this.value == '') this.value = this.defaultValue">  

focus()  获得焦点事件

blur()失去焦点事件

defaultValue 属性设置或返回文本框的初始内容。

onfocus="if(this.value == this.defaultValue) this.value = ''"    当输入框获得焦点时如果value等于默认值(value)就让输入框变成空

onblur="if(this.value == '') this.value = this.defaultValue"     当输入框失去焦点时如果value为空就让输入框的value等于默认值(value)

4.button点击自动刷新页面

　　button,input type=button按钮在IE和w3c，firefox浏览器区别： 
　　1、当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。 
　　2、但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。

解决办法：

为button按钮增加一个type=”button”属性。

5.改变placeholder的颜色

::-webkit-input-placeholder { /* WebKit browsers */ 
color: red; 
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: red; 
}
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: red; 
}
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: red; 
}

6.多行文本溢出

.box {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

其中-webkit-line-clamp就是控制行数的，是3就是显示3行，3行结束点点点，如果是2则最多2行。

 table中td单行文本溢出

<table style="table-layout: fixed; XXX px">
    <tr>
          <td style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;" ></td>
    </tr>
</table>

table标签需要设定属性 table-layout: fixed;XXXpx;

在要超出隐藏的td标签上设定属性  white-space: nowrap;text-overflow: ellipsis;overflow: hidden; 

不要忘了给table加个宽度 

这里需要注意td里面内容超过高度的话会自动把把td撑大   这里用overflow是没有用的

7.a标签的target属性

target：“_blank ”          -- 在新窗口中打开链接 

target：“_parent ”         -- 在父窗体中打开链接 

target：“_self “           -- 在当前窗体打开链接,此为默认值 

target：“_top “            -- 在当前窗体打开链接，并替换当前的整个窗体(框架页) 



8.移动端android点击时会出现背景（边框）
　　点击图片

body{ //remove  img   click  border   for  andriod
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -moz-tap-highlight-color:rgba(0, 0, 0, 0);
    -ms-tap-highlight-color:rgba(0, 0, 0, 0);
    -o-tap-highlight-color:rgba(0, 0, 0, 0);
    tap-highlight-color:rgba(0, 0, 0, 0);
}

pc端重置a标签active时的背景框颜色
 a:active{ background-color: 需要设置的颜色;}  

通常我们选中文字时的背景色是蓝色。我们可以用以下样式去设置网页的选中内容的样式：

::selection {  
    background: #FFF;  
    color: #333;  
}  
::-moz-selection {  
    background: #FFF;  
    color: #333;  
}  
::-webkit-selection {  
    background: #FFF;  
    color: #333;  
}  

如果要去掉选中时的颜色，把background都置为none就行了。

颜色渐变：

background: linear-gradient(to right,#ff4e63,#ff6cc9);

c3实现文字滚动

@keyframes leftcrawl {    这里相当于一个命名函数
     to { transform: translateX(-240rem); }
}
                
.box {   box这个元素每隔15s执行一次上面的函数
     animation: leftcrawl 15s linear infinite;
}

记得加定位

js实现文字滚动

　　　　　　　var scrlSpeed = 1
                // decreasing speed for mozilla  
            scrlSpeed = (document.all) ? scrlSpeed : Math.max(1, scrlSpeed - 1)

            function initScroll(container, object) {
                if(document.getElementById(container) != null) {
                    var contObj = document.getElementById(container);
                    var obj = document.getElementById(object);
                    contObj.style.visibility = "visible";
                    contObj.scrlSpeed = scrlSpeed;
                    widthContainer = contObj.offsetWidth;
                    obj.style.left = parseInt(widthContainer) + "px";
                    widthObject = obj.offsetWidth;
                    interval = setInterval("objScroll('" + container + "','" + object + "'," + widthContainer + ")", 20);
                    contObj.onmouseover = function() {
                        contObj.scrlSpeed = 0;
                    }
                    contObj.onmouseout = function() {
                        contObj.scrlSpeed = scrlSpeed;
                    }
                }
            }

            function objScroll(container, object, widthContainer) {
                var contObj = document.getElementById(container);
                var obj = document.getElementById(object);
                widthObject = obj.offsetWidth;
                if(parseInt(obj.style.left) > (widthObject * (-1))) {
                    obj.style.left = parseInt(obj.style.left) - contObj.scrlSpeed + "px";
                } else {
                    obj.style.left = parseInt(widthContainer) + "px";
                }
            }

            // on page load we initiate scrolling  
            window.onload = function() {
                initScroll("wenzi1", "wenzi");      第一个是父级id    第二个是文字信息id
            }

两种实现方式都有用在三林看板项目

父元素的高度未知，height使用百分比行不通，而padding的百分比值是依据父元素的宽度来计算的，我们可以使用padding-top撑开高度

原生回车事件

document.onkeydown=function(event){
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if(e && e.keyCode==27){ // 按 Esc 
                //要做的事情
                alert(1)
              }
            if(e && e.keyCode==113){ // 按 F2 
                 //要做的事情
                alert(2)
               }
             if(e && e.keyCode==13){ // enter 键
                 //要做的事情
                alert(3)
            }
        }; 

改变placeholder样式

::-webkit-input-placeholder{color:#f72109;}
::-moz-placeholder{color:#f72109;}
:-ms-placeholder{color:#f72109;}

.xx ::-webkit-input-placeholder{color:#f72109;}
.xx ::-moz-placeholder{color:#f72109;}
.xx :-ms-placeholder{color:#f72109;}

.xx为类名

或

input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill {
    box-shadow: inset 0 0 0 1000px #fff;
    -moz-box-shadow: inset 0 0 0 1000px #fff;
    /* -webkit-box-shadow:inset 0 0 0 1000px #fff; */
}

 

 

隐藏滚动条

在webkit内核的浏览器里可以定义滚动条样式。
在CSS初始处定义
::-webkit-scrollbar{
display:none;
}
----------------------------------------
在其他浏览器里可以设置父容器宽度为100%，子容器宽度为100%+18px
这样滚动条处于视窗可视范围外，算是个投机取巧的办法。