Form表单基础知识和常用兼容方法笔记（一）

HTML表单操作详解

最新推荐文章于 2022-03-09 08:30:13 发布

转载最新推荐文章于 2022-03-09 08:30:13 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yoyoqd0512/p/4773479.html

本文详细介绍了HTML表单的基本操作，包括如何通过JavaScript获取表单元素、表单属性及方法，如提交、重置等，并深入探讨了表单字段的属性、方法及事件处理。

需要用到的HTML

<form id="myForm" name="yourForm" action="">
        姓名：<input type="text" id="textFiled" name="user" value="text">
        <p id="box"></p>
        <input type="submit" id="sub" value="提交">
        <textarea name="textbox1" id="" cols="30" rows="10">111</textarea>
        <textarea name=" textbox1" id="" cols="30" rows="10">111</textarea>
        <select name="location" id="">
            <option value="上海v">上海t</option>
            <option value="南京v">南京t</option>
            <option value="苏州v">苏州t</option>
        </select>
</form>

1,取出form中的元素

var fm=document.forms[0]或者var fm=document.getElementById('myForm') 或者var myForm=document.forms[‘yourForm’]; //取得表单

var textbox=fm.elements['textbox1'] //取得name=textbox1 的 textarea

var selectbox=fm.elements['location'];以上都可以用id取得相应的元素

var textFiled=document.getElementById('textFiled');//input

表单字段elements是取得form所有表单元素的集合：

例如：

var textarea= form.elements[‘content’] 取得name=content的表单元素集合

var field= textarea[0] 取得第一个name为content的textarea;

2, 表单属性，方法

表单提交submit（）；

fm.submit();

重置表单reset();

form.rest();

acceptCharset:服务器能处理的字符集

action:接受请求的url

elements:表单所有控件的集合

length:表单中控件的数量

method:要发送http请求类型

name:表单的名称

reset();重置表单

submit:提交表单

target:用于发送请求和接收响应的窗口名称

3,共有的表单字段属性和方法，事件

属性：

disabled:字段是否被禁用 <input type="text" id="sub" value="文本被禁用 " disabled=true >

form: 当前表单元素是否指向某个表单

name:当前字段名称

readyOnly:当前是否只读 <input type="text" id="sub" value="文本只读 " readyOnly =true >

type：字段类型

value:提交给服务器的值

方法：

focus（）：得到焦点的方法

blur（）:失去焦点的方法

h5新增方法 autofocus <input type="text" id="sub" value="文本" autofocus > 不用focus 焦点自动移动到相应字段

事件

blur:当前字段失去焦点时触发

change:对于input和textarea 元素，在他们失去焦点且value值改变时候触发，而对于select元素，在其选项改变时触发；经常用于验证用户在字段中输入的数据；

focus：当前字段得到焦点时候触发

4,文本框脚本，选择文本框，取得选择的文本，选择部分文本

选择文本框select()

这个方法用于选择文本框中所有的文本，大多数浏览器（opera）除外都会将焦点设置到文本框中，

与之对应的select事件，选择文本框的文本时会触发该事件，什么时候触发看各个浏览器

取得选择的文本

html5通过扩展方案解决了这个问题。添加属性selectionStart 和 selectionEnd 这两个属性中保存的是基于0 的数值但是可悲的是ie8 不支持者两个属性

例如：textbox.value.substring(textbox.selectionStart, textbox.selectionEnd)

兼容ie8及以下版本选择文本

function getSelectText(textbox){
If(typeof   textbox.selectionStart==”number”){
  return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd)

}else if(document.selection){
   return document.selection.createRange().text;
}

调用
//调用
var textFiled=document.getElementById('textFiled');
    ev.addEvent(textFiled,"select",function(){
        var result=getSelectText2(this);
        document.getElementById('box').innerHTML=result;
    })

选择部分文本 setSelectionRange()

setSelectionRange()接受两个参数：要选的的第一个字符的索引和要选择的最后一个字符之后的索引可悲的是ie又不兼容

例子：

textbox.value=’hello word’

//选择所有文本

Textbox.setSelectionRange(0,textbox.value.length);

//选择前三个字符

Textbox.setSelectionTange(0,3); //hel

//选择第四道第六个字符

Textbox.setSelectionTange(4,7); //’o w’

兼容ie8及以下版本选择部分文本

//选择部分文本兼容办法
function selectText(textbox,startIndex,stopIndex){
    if(textbox.setSelectionRange){
        textbox.setSelectionRange(startIndex,stopIndex);
    }else if(textbox.createTextRange){
        var range=textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character",startIndex)
        range.moveEnd("character",stopIndex-startIndex);
        range.select();
    }
    textbox.focus();
}


//调用
textbox.value='hello word';

//选择全部文本
selectText(textbox,0,textbox.value.length)//'hello word'

//选择前3个字符
selectText(textbox,0,3)//'hel'

//选择第四到第六个
selectText(textbox,4,7)//'o w'

请关注下节，，，，，，，，

转载于:https://www.cnblogs.com/yoyoqd0512/p/4773479.html