表单元素属性和事件

关掉input烦人的自动提示

给input添加autocomplete="off"即可

<input type="text" id="username" autocomplete="off">

设置元素不可交互(input,select等表单元素)

添加disable属性

    <button id="regist-btn" disabled">注册</button>

这个属性为没有值的属性,在js中进行操作的话应该是disabled="true"

registBtn.disabled = true;

:disabled伪类还可以设置不可交互时的样式,如:

 button:disabled{
     background-color: gray;
 }

下拉列表中显示的内容总是option标签的内容,js中获取value时(通过select),如果设置了value,则获取value属性的值,如果没有设置value则获取内容的值

<select id="sel">
        <option>苹果</option>
        <option>橘子</option>
        <option value="banana">香蕉</option>
</select>

input元素对象的value属性

表示当前输入框中输入的内容,类型为字符串,同样可以通过value属性设置输入框中的内容

console.log(username.value);

onfocus,onblur事件

元素获得焦点时的事件/元素失去焦点时的事件

username.onfocus = function(){

}

oninput事件

当输入框中的内容发生编辑时触发
 

username.oninput = function(){

    console.log(username.value);

}

多选框获取内容

对于多选框,获取内容不是用value,而是用checkde,是一个布尔值

下拉列表的onchange事件

当列表选中内容发生变化时触发

sel.onchange = function(){
    // 下拉列表元素对象的value表示当前被选中的option的value
    console.log(sel.value);
}