基础 - 搜索框

结构

<div class="search">
    <input id="txt" type="text" /><button id="btn">查询</button>
    <label id="message" for="txt">默认的搜索文字</label>
</div>

样式

input,
button {
    border: 0 none;
    padding: 0;
}
.search {
    position: relative;
    width: 258px;
    height: 40px;
    margin: 100px auto;
    font-weight:bold;">#666666;
}
.search input {
    width: 208px;
    height: 40px;
    font-weight:bold;">#C81623;
    outline-style: none;
    padding-left: 8px;
}
.search label {
    position: absolute;
    top: 5px;
    left: 20px;
    font: 400 normal 15px/40px "Microsoft Himalaya";
    color: #d7d764;
    cursor: text;
}
.search button {
    width: 42px;
    height: 40px;
    font-weight:bold;">#DDDDDD;
    　　cursor: pointer;
}

行为

window.onload = function () {
    var oTxt = window.document.getElementById("txt");
    var oMessage = window.document.getElementById("message");
    var oBtn = window.document.getElementById("btn");
    oBtn.onclick = function() {
        window.console.log(oTxt.value);
    }
    oTxt.oninput = oTxt.onpropertychange = function () {
        if (oTxt.value == "") {
            oBtn.style.color = "#000000";
            oMessage.style.display = "block";
        } else {
            oBtn.style.color = "#FF0000";
            oMessage.style.display = "none";
        }
    }
}

 

input标签获得焦点

window.onload = function () 
    var oTxt = window.document.getElementById("txt");
    oTxt.focus();
}

鼠标经过选中内容

window.onload = function () 
oTxt.onmouseover = function () {
    　　oTxt.select();
　　}
}