博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Form表单基础知识和常用兼容方法笔记(一)
阅读量:6328 次
发布时间:2019-06-22

本文共 3202 字,大约阅读时间需要 10 分钟。

需要用到的HTML

姓名:

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所有表单元素的集合:

例如:

<textarea name="content" id="" cols="30" rows="10">111</textarea>

<textarea name=" content " id="" cols="30" rows="10">222</textarea>

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

你可能感兴趣的文章
iOS开发NSLayoutConstraint代码自动布局
查看>>
正则表达式
查看>>
mysql [ERROR] Can't create IP socket: Permission denied
查看>>
PBRT笔记(4)——颜色和辐射度
查看>>
CustomView的手势缩放总结
查看>>
linux复制指定目录下的全部文件到另一个目录中,linux cp 文件夹
查看>>
Java面试参考指南(二)
查看>>
CentOS yum安装mysql
查看>>
OceanBase笔记1:代码规范
查看>>
[Algorithms] Longest Increasing Subsequence
查看>>
MAC下GitHub命令操作
查看>>
springboot之filter/listener/servlet
查看>>
lua_local变量在new时不会被清空
查看>>
uGUI练习 开篇
查看>>
【springboot】【redis】springboot+redis实现发布订阅功能,实现redis的消息队列的功能...
查看>>
【RocketMQ】【分布式事务】使用RocketMQ实现分布式事务
查看>>
cURL实现Get和Post
查看>>
爬取王垠的博客并生成pdf
查看>>
六.期货期权及其他金融衍生品(投资分析)
查看>>
[AX]AX2012 SSRS报表使用Report Data Provider Class作为数据集
查看>>