javascript遇到html5的一些表单属性

前端技术 2023/08/09 JavaScript

input属性：
placeholder:输入框的默认值，向用户显示描述性说明文字或者提示信息

autocomplete：值为on和off。。on则代表当该字段填写并提交后再返回该页，再输入时会显示以前输入的。off则是关闭，包含用户输入数据的安全。默认为on
autofocus：页面载入时设置某个input自动获取焦点，注意该页面只能设置一个input的这个属性，设置多个相当于没有设置。
list特性和datalist：通过list为某个输入框增加下拉列表。。相当于js实现的“自动完成”功能，但是不能进行模糊查询
如果datalist内有2项值：\"a34343\"和\"并24234\",用户希望的是输入了3后这2个值都出现，但实际上一个也不出现。
它要求是完全匹配，比如输入a，则下拉a34343出现，接着输入4，那么这个下拉值也就没有了。

required：表单提交前该元素必须填写，即不能为空。不建议使用，因为提示信息‘请填写此字段\'，除非有属性可以代替该提示信息。
pattern：给input标签内写正则的地方。。type为email或url的输入控件内置相关正则表达式，如果value不符合其正则表达式，那表单将通不过验证，无法提交。。
不建议给type为email或url的元素使用，因为提示信息固定,正则固定。。还不如js直接重写。

一些输入设置：
rangeUnderflow 限制数值控件的最小值 设置min， input type=\"number\" min=\"0\" value=\"20\"
rangeOverflow 限制数值控件的最大值 设置max，input type=\"number\" max=\"100\" value=\"20\"
stepMismatch 确保输入值符合min,max,step的设置 设置max min step， input type=\"number\" min=\"0\" max=\"100\" step=\"10\" value=\"20\"
</pre>

下面是input=number用的一个小函数：

function inputV(inpFields,tips){//input值范围判断。。0-100.正正数
/**
* input值范围判断。。0-100.正正数
* range 范围：使用<input type=\"number\" min=\"0\" max=\"100\"/>
* if(inputV(v3,msgABC.t4)==false){return false;}
* **/
var km=inpFields[0].validity,v3=inpFields.val();
console.log(\'不是数字：\',km.badInput,\'超出范围：\',km.rangeOverflow,\'小于最小值：\',km.rangeUnderflow);
if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a返回true 22返回true -1 返回 true
alert(tips);
return false;
}
if(isNaN(parseInt(v3))){
console.log(\'NaN 不判断.因为值为空\');
return true;
}
else if(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){//不是数字!!isNaN(\'v3\')
alert(tips);
return false;
}
return true;
}

list特性和datalist:

<input type=\"url\" list=\"url_list\" name=\"link\" />
<datalist id=\"url_list\">
<option label=\"W3School\" value=\"http://www.w3school.com.cn\" />
<option label=\"Google\" value=\"http://www.google.com\" />
<option label=\"Microsoft\" value=\"http://www.microsoft.com\" />
</datalist>

<form action=\"http://localhost/test.php\" method=\"post\" id=\"register\"></form>
url：<input type=\"url\" name=\"url\" form=\"register\" required/><br />
user：<input type=\"text\" name=\"user\" value=\"\" form=\"register\"/><br />
pwd：<input type=\"password\" name=\"pwd\" value=\"\" form=\"register\" /><br />
<select name=\"year\" form=\"register\">
<option value=\"1970\">1970</option> 
<option value=\"1980\">1980</option> 
<option value=\"1990\">1990</option> 
</select>
<input type=\"submit\" value=\"注册\" form=\"register\"/>

正则：<input type=\"text\" name=\"tt\" pattern=\"\\d{3}\" value=\"\" form=\"register\"/>

邮箱：<input type=\"email\" name=\"youxinag\" value=\"\" placeholder=\"这是默认值\" autofocus=\"autofocus\" form=\"register\" required=\"required\" /><br />
地址：<input type=\"url\" name=\"url\" form=\"register\" form=\"register\"/>
DATE:<input type=\"date\" name=\"riqi\" value=\"\" form=\"register\"/><br />
TIME:<input type=\"time\" name=\"shijian\" value=\"\"/>
MONTH:<input type=\"month\" name=\"yue\" value=\"\" />
周：<input type=\"week\" name=\"zhou\" value=\"\" />
数字：<input type=\"number\" name=\"suzhi\" value=\"\" form=\"register\" /><br />
滑动条<input type=\"range\" name=\"suzhi\" value=\"\" form=\"register\" max=\"10\" step=\"2\"/>
搜索 :<input type=\"search\" name=\"huadong\" value=\"\" form=\"register\" results=\"n\"/>
颜色：<input type=\"color\" name=\"huadong\" form=\"register\"/><br />
<input type=\"file\" id=\"a33\" />

自动填充表单<br/>

<input type=\"text\" name=\"auto\" value=\"\" list=\"movie\" />
<datalist id=\"movie\">
<option>11111111</option>
<option>243234234</option>
<option>3324234</option>
</datalist>


输出表单output

<form action=\"\" method=\"post\" oninput=\"result.value=parseInt(no1.value*no2.value)\">
<input type=\"number\" name=\"no1\" value=\"\"/>
<input type=\"number\" name=\"no2\" value=\"\"/>
<output name=\"result\" ></output>
</form>

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/756

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案