表单内容操作

var ipt = document.getElementById('ipt');
var txt = document.getElementById('txt');
var zhangsan = document.getElementById('zhangsan');
var btn = document.getElementById('btn');
 
一、获取值或赋值;

1、普通表单元素使用value属性;
用法:ipt.value = '新内容';

2、文本域:既可以使用value 也可以使用innerHTML,推荐使用value;

用法:txt.value = '新内容';

3、下拉菜单选项:只能使用inner组;value不能进行 内容更改;

用法:zhangsan.innerText = '这是显示的内容';

4、按钮 button 只能使用 inner组,不能使用value;

用法:btn.innerHTML = '这是显示的内容';

 

二、input输入框的禁用属性,如果值不是boolean值那么就会进行隐士转换;

int.disabled = true;为禁用;

int.disabled = false;为不禁用;

input输入框事件;

 

input 复选框中的属性,如果值不是boolean值那么就会进行隐士转换;
<input type="checkbox" id="cb" checked>
cb.checked = false;:非选中状态
cb.checked = true; 选中状态;
 

1、获取焦点事件 ;js事件中要加on为  onfocus;

focus:当光标再输入框闪烁时执行;

2、失去焦点事件;js事件中要加on为  onblur;

blur:当光标移出输入框时执行;

3、input :在输入框输入或删除内容时触发;js事件中要加on 为oninput

ie678不支持oninput ,支持的是propertychange在js事件中要加on 为onpropertychange

兼容性写法:    inp.oninput = inp.onpropertychange = function(){事件驱动程序};

 

三、下拉菜单的选中效果selected,如果值不是boolean值那么就会进行隐士转换;

<select>
        <option>张三</option>
        <option id="lisi">李四</option>
        <option>王五</option>
</select>

lisi.selected = true; 选中状态

lisi.selected = false; 非选中状态;

 

四、文本域内容

<textarea id="txt">这是文本域的内容</textarea>
禁止拖拽文本域 :resize : none;
posted @ 2018-07-10 14:17  其微乐  阅读(185)  评论(0编辑  收藏  举报