精华内容
下载资源
问答
  • HTML input控件

    万次阅读 多人点赞 2018-04-12 21:41:48
    input控件input 控件是单行输入型控件,用来接受用户输入的信息。可以在 form 元素的开始标签和结束标签之间,添加 input 元素来创建 input 控件。input 元素是一个带有属性的空元素,格式为:<input type=&...

    input控件

    input 控件是单行输入型控件,用来接受用户输入的信息。可以在 form 元素的开始标签和结束标签之间,添加 input 元素来创建 input 控件。input 元素是一个带有属性的空元素,格式为:

    1. <input type="" name="" value="" />

    其中, type 属性用来指定控件的类型;name 属性用来指定控件的名称,服务器端脚本就根据名称来获得文本框中的值;value 属性指定控件的默认值。基本控件类型见表 3‑1。

    表 3‑1 基本输入型控件
    类型说明
    text定义单行文本输入域,用户可在其中输入文本
    hidden定义隐藏的文本域,该文本域不会显示在浏览器上,其信息对用户不可见。如果不希望用户看到某些数据,可以使用该输入类型的文本域
    password定义密码输入域,用户在该域中输入的字符不直接显示,而是显示星号或实心圆
    radio定义单选框,用户只能在多个选项中选择其中一个
    checkbox定义复选框,用户可以在多个选项中选择一个或多个
    file定义输入字段和 "浏览" 按钮,供用户选择文件
    submit定义提交按钮。提交按钮会把表单数据发送到服务器,数据会被发送到在表单的 action 属性中规定的URL
    reset定义重置按钮。重置按钮会把表单中的所有数据置为初始值

    除了上述这些基本的输入型控件,在HTML5中,又新增了很多输入型控件,使控件类型更加丰富。新增的输入型控件类型见表 3‑2。

    表 3‑2 新增的输入型控件
    类型说明
    search定义搜索框,用户可在其中输入任意文本
    tel定义电话号码输入框
    url定义定义URL输入框,用户只能输入合法的URL
    email定义定义email输入框,用户只能输入合法的email
    number定义定义数字输入框,用户只能输入数字
    range定义有取值范围的数字输入框,用户只能在指定的数值范围内进行选择
    color定义颜色选择器控件,用户可以选择颜色
    date pickers定义日期选择框,用户可以根据预定的格式输入日期、时间等

    开发人员不必担心这些控件的兼容性问题,在不支持这些新类型的浏览器中,它们会被优雅降级,退化成普通的单行文本输入框。接下来对这些输入型控件进行简单的介绍。

    text控件

    type=text 定义单行文本输入框,用户可在其中输入文本。如果未显式设置 type 属性,则 input 控件的默认类型就是 text。

    必须为每个文本框设置 name 属性,只有在文本框需要默认值的情况下,才需要设置 value 属性。除此之外,还可以设置其他属性,如required、placeholder 属性等。如:

    1. <label>用户名:</label><input type="text" name="user" placeholder="请输入用户名" />

    运行结果如图 3‑4 所示:

    单行文本框图3-4 单行文本框

    另外,对于文本输入框,包括 text、password、file、search、tel 、url、email,还可以通过 minlength 属性指定最少必须输入的字符数,通过 maxlength 属性指定最多可输入的字符数。

    当用户输入的字符数小于 minlength 属性值,浏览器就会阻止用户提交表单;当用户输入的字符数超过 maxlength 属性值,浏览器就会阻止用户继续输入。

    hidden控件

    type=hidden定义隐藏的文本框,它不会直接显示给用户。在提交表单时,隐藏文本框的信息也会被提交到服务器。因此,通常用它来存储表单先前收集到的信息,并连同当前表单的数据一起发送给服务器,供表单处理程序使用。如:

    1. <input type="hidden" name="country" value="China" />

    尽管用户不会看到这个文本框,但在提交表单时,名称“country”和值“China”会随着表单一起发送给服务器。

    切记,虽然隐藏的文本框不会直接显示在网页中,但不要将密码、信用卡号等敏感信息放到隐藏的文本框中,因为用户仍然可以通过查看HTML源代码看到它。

    password控件

    type=password定义密码输入框。密码框与文本框的唯一区别是,密码框中输入的文本不会直接显示,而是显示为星号或实心圆。如:

    1. <label>密码:</label><input type="password" name="password" />

    运行结果如图 3‑5 所示:

    密码框图3-5 密码框

    事实上,密码框提供的唯一保护措施,就是防止其他人看到用户输入的密码,以星号或实心圆代替而已。在提交表单时,还是以明文的方式,将用户输入的真实值发送到服务器,信息在发送过程中并没有加密。

    radio控件

    type=radio 定义单选框,通过 name 属性定义单选框的名称,通过 value 属性定义单选框的值。

    一个表单上,name 属性值相同的单选框被归为一组,为不同 radio 设定不同的 value 值,通过获取指定 name 的值,就知道哪个按钮被选中了,不用单独判断。

    一组单选框中,最多只能有一个选项被选中。当用户点击一个选项时,该选项被选中,其他选项都会自动变为非选中状态。可以通过 checked 属性,定义默认选中状态。如:

    1. 性别:<input type="radio" name="sex" value="male" checked />男
    2. <input type="radio" name="sex" value="female" />女

    运行结果如图 3‑6 所示:

    单选框图3-6 单选框

    上述代码中,value="male" 的选项定义了 checked 属性,当页面打开时,它默认被选中。当然,它只是默认被选中而已,用户可以通过点击来自由选择其他选项。提交表单时,单选框的名称和被选中的单选框对应的值,将会被提交到服务器端。

    原则上,只能有一个选项定义 checked 属性,但如果多个选项同时定义了 checked 属性,则是最后一个选项被默认选中。

    checkbox控件

    type=checkbox 定义复选框,通过 name 属性定义复选框的名称,通过 value 属性定义复选框的值。

    表单上 name 属性值相同的复选框被归为一组,为不同 checkbox 设定不同的 value 值。提交表单时,每个复选框的名称及复选框对应的值,都会被提交到服务器端。

    一组复选框中,可以有任意多个选项被选中。当用户点击一个选项时,该选项被选中,再次点击时,该选项会取消选中。可以通过checked属性,定义某些选项默认被选中。如:

    1. 爱好:<input type="checkbox" name="hobby" value="music" checked />音乐
    2.      <input type="checkbox" name="hobby" value="swimming" />游泳
    3.      <input type="checkbox" name="hobby" value="football" checked />足球
    4.      <input type="checkbox" name="hobby" value="skating" />轮滑

    运行结果如图 3‑7 所示:

    复选框图3-7 复选框

    file控件

    type=file 定义文件选择框,供用户用户向服务器上传文件(如照片、简历等)。如:

    1. 头像: <input type="file" name="picture" />

    文件选择框在HTML4之前就已经存在,并表现为一个单行文本输入框和一个“浏览…” 按钮。

    文件选择框外观图3-8 文件选择框外观

    在HTML5中,不再有文本输入框,而是一个“选择文件”的按钮。在用户未选择文件时,显示“未选择任何文件”字样,用户选择文件后,在按钮的右侧显示文件的名称。

    选择文件前后图3-9 选择文件前后

    在HTML5中,文件选择框增加了两个属性:一个是 accept 属性,用来指定允许的文件类型,多个MIME类型用英文逗号分开;一个是 multiple属性,表示允许选择多个文件。如:

    1. <label>头像: </label><input type="file" name="picture" accept="image/png" />

    添加 accept 属性后,点击“选择文件”的按钮,在弹出的对话框中,默认的文件类型就是所设置的文件类型。当然,accept 属性只是设置默认的文件类型,它并不是禁止用户选择其他类型的文件。如图 3‑10 所示:

    限制文件类型图3-10 限制文件类型

    从上图可以看出,用户仍然可以将文件类型改为所有文件,来选择任意类型的文件。因此,如果要禁止其他类型的文件,则要在提交表单时进行检查,如果不符合要求,给出相应的提示信息,并拒绝上传。

    添加multiple属性后,点击“选择文件”的按钮后,就可以按住Ctrl键,在弹出的对话框中选择多个文件。如:

    1. 多文件上传: <input type="file" name="picture" multiple />

    选择多文件后,在“选择文件”按钮的右侧显示诸如“4个文件”字样,表示用户选择了4个文件。当鼠标移动到文字上时,浏览器自动显示这4个文件的名称。如图 3‑11 所示:

    显示选择的文件列表图3-11 显示选择的文件列表

    在浏览器的默认方式下,用户选择文件后,只能看见文件的名称,但有时候却希望看到更多的信息,如文件的大小、类型等。

    事实上,当用户选择文件时,浏览器会将文件列表保存在 files 属性中(即FileList对象),同时还会触发 onchange 事件。FileList 对象是 file 对象的列表,file 对象的name、size、type、lastModifiedDate属性,分别用来保存文件的名称、大小、类型、最后修改日期信息。因此,要实现这个功能也不难,只需少量的 Javascript 代码即可。

    首先,为文件选择框注册 onchange 事件,并定义一个显示区域:

    1. <input type="file" onChange="showFiles (this.files)" name="picture" multiple />
    2. <div id="tips"></div>

    然后,在 onchange 事件的处理函数中,遍历FileList 对象,获取每个文件的名称、大小、类型,保存在一个表格中,并在 id="tips" 的区域中显示出来:

    1. function showFiles(files) {
    2.     var strText = "<Table>";
    3.     strText += "<tr><th>文件名称</th><th>文件类型</th><th>文件大小</th></tr>";
    4.     for(var i = 0; i < files.length; i++) {
    5.        strText += "<tr>";
    6.        strText += "<td>" + files[i].name + "</td>";
    7.        strText += "<td>" + files[i].type + "</td>";
    8.        strText += "<td>" + files[i].size + " byte</td>";
    9.        strText += "</tr>";
    10.     }
    11.     strText += "</Table>";
    12.     document.getElementById("tips").innerHTML = strText;
    13. }

    运行结果如图 3‑12 所示:

    显示选择的文件详细信息图3-12 显示选择的文件详细信息

    需要注意的是,要让用户能够上传文件,必须将 form元素的 method 属性设置为 post,并将 enctype 属性设置为 multipart/form-data,enctype 属性可以确保文件采用正确的格式上传。

    除了上述这些基本的输入型控件,在HTML5中,又新增了很多输入型控件。在不支持这些新类型的浏览器中,它们会被优雅降级,成为普通的文本输入框。HTML5新增的输入型控件有:

    search控件

    type=search 定义搜索框,在外观上,它跟普通的文本输入框没什么区别,但是浏览器可能会为搜索自动渲染成圆角。当用户在搜索框中输入文本后,它右边会有一个小×,方便用户清除输入的数据。运行结果如图 3‑13 所示:

    搜索框图3-13 搜索框

    tel控件

    type=tel 定义电话号码输入框。由于国际上没有统一的电话号码格式,因此,电话号码输入框跟普通的文本输入框没什么区别。

    虽然看起来它跟普通的文本输入框没什么区别,但它却有一些很有用的特性,用于帮助验证用户输入的内容。如,使用 pattern 属性来定制验证规则:

    1. <input type="tel" name="tel" placeholder="xxx-xxxxxxxx " pattern="\d{3}-\d{8}" />

    上述代码使用正则表达式,来对用户输入的内容进行限制,对于这个电话输入框,pattern 属性要求“只接受以下格式的输入:xxx-xxxxxxxx,其中x 均为数字”,因为中国的固定电话号码都是这样的格式。

    在提交表单时,现代浏览器会对 tel 框中输入的文本进行检查,确保其符合验证规则的格式。如果格式不合法,会显示警告信息,阻止提交表单,并让该文本框获得焦点,以方便用户修改文本。运行结果如图 3‑14 所示:

    电话号码输入框图3-14 电话号码输入框

    此外,当电话号码输入框获得焦点后,许多触屏设备(如iPhone等),会弹出电话号码键盘方便用户输入,这不仅使输入大为简化,也能防止在移动设备上输入无效字符。

    url控件

    type=url 定义URL输入框,在外观上,它跟普通的文本输入框看上去没什么区别。但是,在提交表单时,现代浏览器会对URL框中输入的文本进行检查,确保其符合URL的格式。如果格式不合法,会显示警告信息,阻止提交表单,并让该文本框获得焦点,以方便用户修改文本。运行结果如图 3‑15 所示:

    URL输入框图3-15 URL输入框

    需要注意的是,www.waibo.wang 并不是有效的URL,因为URL 必须以http:// 或https:// 开头。因此,最好使用占位符提示访问者,或者通过解释文本中给出合法的格式。

    此外,当URL输入框获得焦点后,许多触屏设备(如iPhone等),会根据输入类型改变键盘模式,如键盘上出现Go、斜杠(/)、.com等。

    email控件

    type=email 定义 email 输入框,在外观上,它跟普通的文本输入框看上去没什么区别。但是,在提交表单时,现代浏览器会对 email 框中输入的文本进行检查,确保其符合电子邮件地址的格式。如果格式不合法,会显示警告信息,阻止提交表单,并让该文本框获得焦点,以方便用户修改文本。运行结果如图 3‑16 所示:

    email输入框图3-16 email输入框

    email输入框的一个非常有用的功能是,它能够阻止用户在该字段填入多个 email 地址。 除非你在input标签中设置multiple属性,否则只允许使用一个单一地址:

    1. <input type="email" name="email" id="email" multiple>

    此外,许多触屏设备(如iPhone等),会根据输入类型改变键盘模式,如键盘上出现邮箱地址的@符号等。

    number控件

    type=number 定义数字输入框。默认情况下,对输入的数值没有范围限制,可以通过min 和max属性设定允许输入的最小值和最大值、通过 step 属性设定步长、value属性设置默认值。如:

    1. <label>请输入数字(0~10): </label><input type="number" min=0 max=10 />

    用户可以直接在文本框中输入数字。不过,为了方便输入,当数字输入框获得焦点后,浏览器会为它提供控制按钮,允许用户点击向上或向下箭头来改变文本框中的值。运行结果如图 3‑17 所示:

    数字输入框图3-17 数字输入框

    range控件

    type=range 定义有取值范围的数字输入框,让用户在指定的数值范围内进行选择。默认情况下,其取值范围为0~100,默认值为其中间值50。可以通过设置min、max属性来改变其取值范围,通过设置value属性来改变其默认值。

    range类型控件在浏览器将显示一个滑动条,让用户拖动鼠标来选择某数值,在两个方向移动时,以其步长增大或减小当前值。默认步长为1,可以通过设置step改变其步长。如:

    1. <input type="range" min="60" max="100" value="80" step="5">

    上述数字输入框的取值范围将是 60~100,默认值为80,步长是5。运行结果如图 3‑18所示:

    有范围的数字输入框图3-18 有范围的数字输入框

    有点遗憾的是,浏览器并不显示其取值范围和用户当前选择的值。这样,用户无从得知自己当前选择的值,而人们常常有又想看到取值范围和当前值。

    其实,这个功能实现起来并不难,只需使用 output 控件和简单的Javascript即可实现。output控件是HTML5中专门用来定义不同类型输出的控件。

    首先,在 range 控件后面增加 output 控件。然后,为range元素增加 onChange 事件的处理程序,当 range 的值改变时,就显示在 output 控件中,onChange="output.value = value",就这么简单。需要注意的是,onChange事件中元素的 id 必须与 range 控件的 id相同。代码如下:

    1. <input type="range" min="60" max="100" value="80" step="5" onChange="output.value=value">
    2. <output id="output"></output>

    这样一来,一旦移动滑动条,就会在 output 控件中显示当前选择的值。当然,除显示当前值外,如果能在range控件上显示其取值范围,这样就更人性化了。其实这也很简单,只需要简单的CSS即可实现,代码如下:

    1. input[type=range]:before  {
    2.    content: attr(min);
    3. }
    4. input[type=range]:after  {
    5.    content: attr(max);
    6. }

    这里是通过CSS的属性选择器和伪元素选择器,在 range 控件的前面显示其最小值,后面显示其最大值。运行结果如图 3‑19 所示:

    显示范围和当前值图3-19 显示范围和当前值

    color控件

    type=color 定义颜色选择器控件,相当的给力,使用也很简单。可以通过 name 属性定义控件的名称,通过 value 属性定义控件的默认颜色。如:

    1. 选取颜色:<input type="color" name="user_color" value="#34538b" />

    在Google Chrome浏览器中的运行结果如图 3‑20 所示:

    颜色选择框图3-20 颜色选择框

    在 input 控件有个颜色为 #34538b 的背景,当在控件上点击,则会弹出操作系统自带的颜色拾取器,使用起来非常方便。如图 3‑21 所示:

    颜色拾取器图3-21 颜色拾取器

    date pickers控件

    Date Pickers是HTML5新增的日期选择框,方便用户根据预定的格式输入日期、时间等信息。

    为了方便输入,浏览器会为日期选择框提供控制按钮,允许用户点击向上或向下箭头来改变文本框中的值,当用户输入数据后,在它右边会有一个小×,方便用户清除输入的数据。对于Date类型,浏览器默认还提供一个箭头,供选择日历。如图 3‑22 所示:

    日期选择框图3-22 日期选择框

    Date Pickers有以下几种类型,每种类型有相应的日期格式:

    表 3‑2 Date Pickers类型
    类型说明
    date日期,格式为YYYY-MM-DD。当文本框获取焦点时,显示日历供选择日期
    time24小时制的时间,格式为 HH:MM
    datetimeUTC 时间,格式为YYYY-MM-DDTHH:MM
    datetime-local当地时间,格式为YYYY-MM-DD HH:MM
    month一年中的某个月,格式为YYYY年MM月
    week一年中的某一周,格式为 YYYY年第××周

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》,并全部在 GitHub 上开源。

    版权声明:本文出自 歪脖网 的《HTML宝典》,欢迎在线阅读,并提出宝贵意见。

    展开全文
  • Html Input表单校验

    万次阅读 2017-04-18 10:02:52
    Html Input表单校验 Input可以绑定的附加属性有:datatype、nullmsg、sucmsg、errormsg、ignore、recheck、tip、altercss、ajaxurl 和 plugin等. 说明:  内置基本的datatype类型有: | 6-16 | n | n6-16 |...

                                                                                               Html Input表单校验


    Input可以绑定的附加属性有:datatype、nullmsg、sucmsg、errormsg、ignore、recheck、tip、altercss、ajaxurl 和 plugin等.

    说明:

                   内置基本的datatype类型有: 6-16 | n | n6-16 | s | s6-18 | p | m | e | url

                   *:检测是否有输入,可以输入任何字符,不留空即可通过验证;

                   *6-16:检测是否为6到16位任意字符;

                   n:数字类型;

                   n6-16:6到16位数字;

                   s:字符串类型;

                   s6-18:6到18位字符串;

                    p:验证是否为邮政编码;

                   m:手机号码格式;

                   e:email格式;

                   url:验证字符串是否为网址。

                   自定义datatype的名称,可以由字母、数字、下划线、中划线和*号组成。

    形如"6-16"的datatype,Validform会自动扩展,可以指定任意的数值范围。如内置基本类型有"6-16",那么你绑定datatype="*4-12"就表示4到12位任意字符。如果你自定义了一个datatype="zh2-4",表示2到4位中文字符,那么datatype="zh2-6"就表示2到6位中文字符。

    5.2版本之后,datatype支持规则累加或单选。用","分隔表示规则累加;用"|"分隔表示规则多选一,即只要符合其中一个规则就可以通过验证,绑定的规则会依次验证,只要验证通过,后面的规则就会忽略不再比较。如绑定datatype="m|e",表示既可以填写手机号码,也能填写邮箱地址,如果知道填入的是手机号码,那么就不会再检测他是不是邮箱地址;datatype="zh,s2-4",表示要符合自定义类型"zh",也要符合规则"s2-4"。

    注:

    5.2.1版本之后,datatype支持:

    直接绑定正则:如可用这样写datatype="/\w{3,6}/i",要求是3到6位的字母,不区分大小写;

    支持简单的逻辑运算:如datatype="m | e, *4-18 | /\w{3,6}/i | /^validform.rjboy.cn$/",

    这个表达式的意思是:可以是手机号码;或者是邮箱地址,但字符长度必须在4到18位;或者是3到6位的字母,不区分大小写;或者输入validform.rjboy.cn,区分大小写。这里","分隔相当于逻辑运算里的"&&"; "|"分隔相当于逻辑运算里的"||";不支持括号运算。

    1 > nullmsg

              当表单元素值为空时的提示信息,不绑定,默认提示"请填入信息!"。

              如:nullmsg="请填写用户名!"

              5.3版开始,对于没有绑定nullmsg的对象,会自动查找class为Validform_label下的文字作为提示文字:

              如这样的html结构:

                 

             <span class="Validform_label">*用户名:</span><inputtype="text" val="" datatype="s" nullmsg="请输入用户名!"/>

              当这个文本框里没有输入时的出错信息就会是:"请输入用户名!"

              这里Validform_label跟input之间的位置关系,不一定是要同级关系,同级里没有找到的话,它还会在同级的子级、父级的同             级、父级的同级的子级里查找。

    2 > sucmsg 

               当表单元素通过验证时的提示信息,不绑定,默认提示"通过信息验证!"。

               如:sucmsg="用户名还未被使用,可以注册!" 

           <span class="Validform_label">*用户名:</span><inputtype="text" val="" datatype="s" nullmsg="请输入用户名!"  sumsg="用户名还未被使用,可以注册!"/>

               5.3版开始,也可以在实时验证返回的json数据里返回成功的提示文字,请查看附加属性ajaxurl的介绍。

    3 > errormsg

                输入内容不能通过验证时的提示信息,默认提示"请输入正确信息!"。

               

           <span class="Validform_label">*用户名:</span><inputtype="text" val="" datatype="s" nullmsg="请输入用户名!"  sumsg="用户名还未被使用,可以注册!" errormsg="用户名必须是2到4位中文字符!"/>

                如:errormsg="用户名必须是2到4位中文字符!"

                5.3版开始,Validform可以根据你绑定的datatype智能的输出相应出错信息,具体介绍请查看tipmsg

    4 > ignore

                 绑定了ignore="ignore"的表单元素,在有输入时,会验证所填数据是否符合datatype所指定数据类型,

                  没有填写内容时则会忽略对它的验证;

    5 > recheck

                 表单里面经常需要检查两次密码输入是否一致,recheck就是用来指定需要比较的另外一个表单元素。

                 如:recheck="password1",那么它就会拿当前元素的值跟该表单下,name为"password1"的元素比较。

    6 > tip

                  表单里经常有些文本框需要默认就显示一个灰色的提示文字,当获得焦点时提示文字消失,失去焦点时提示文字显示。tip                 属性就是用来实现这个效果。它通常和altercss搭配使用。

                  如:

                <input type="text"value="默认提示文字" class="gray intxt"tip="默认提示文字" altercss="gray" />

    7 > altercss

                  它需要和tip属性配合使用,altercss指定的样式名,会在文本框获得焦点时被删除,没有输入内容而失去焦点时重新加上

    8 > ajaxurl     

                   

                   指定ajax实时验证的后台文件的地址。

                    后台页面如valid.php文件中可以用 $_POST["param"] 接收到值,Ajax中会POST过来变量param和name。param是文本框                 的值,name是文本框的name属性。

                    5.2版本开始,可以在ajaxurl指定的url后绑定参数,如:

                   ajaxurl="valid.php?myparam1=value1&myparam2=value2";
                

    <span class="Validform_label">*用户名:</span><inputtype="text" val="" datatype="s" nullmsg="请输入用户名!"  sumsg="用户名还未被使用,可以注册!" errormsg="用户名必须是2到4位中文字符!"  ajaxurl="valid.php?myparam1=value1&myparam2=value2"/>

                   5.3之前的版本中,该文件输出的字符会作为错误信息显示在页面上,如果验证通过需输出小写字母"y"。

                   在5.3版中,实时验证的返回数据做了调整,须是含有status值的json数据!跟callback里的ajax返回数据格式统一,建议不                再返回字符串"y"或"n"。目前这两种格式的数据都兼容。

                  注:

                      如果ajax校验通过,会在该元素上绑定validform_valid值为true。可以通过设置该值来控制验证能不能通过,如验证码的                     验证,第一次验证通过后,不小心右点击了下验证码图片,验证码换了,但是仍然指示这个对象已经通过了验证,这时                     可以手动调整该值:$("#name")[0].validform_valid="false"。

                      怎样设置ajax的参数,具体可以查看Validform对象的config方法。



    正则表达式参考资料:http://deerchao.net/tutorials/regex/regex.htm
















    展开全文
  • html input 禁止输入中文

    千次阅读 2019-05-29 09:30:16
    html input 禁止输入中文: <input type="text" class="username" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')" placeholder="请输入账号" /> 输入中文时,直接替换为空格。 ...
    html input 禁止输入中文:
    
    <input type="text" class="username" οnkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')" placeholder="请输入账号" />

    输入中文时,直接替换为空格。

    展开全文
  • html input 设置只能输入数字并设置最小值

    万次阅读 热门讨论 2019-09-24 10:35:53
    html input 设置只能输入数字 {# 输入0时,也会生效 #} <input type="text" class="form-control" style="width:75px;display: inline;" onkeyup="value=value.replace(/[^\d]/g,'')"> {# min作用只在submit...

    html input 设置只能输入数字

    {# 输入0时,也会生效 #}
    <input type="text" class="form-control" style="width:75px;display: inline;" onkeyup="value=value.replace(/[^\d]/g,'')">
    
    {# min作用只在submit时生效 #}
    <input type="text" class="form-control" style="width:75px;display: inline;" onkeyup="value=value.replace(/[^\d]/g,'')" min='1'>
    
    {# 完美解决 #}
    <input type="number" style = "width:80px" placeholder="1~54" oninput="if(value > 54 || value < 1 ){showAlert('', '非法输入', 3000);value = ''}"/>
    
    <script>
    	function showAlert(parms, msg, time) {
                if (parms){
                    toastr.success(msg, 'Tips:');
                    setTimeout(function () {
                    toastr.clear();
                    }, time)
                } else {
                    toastr.error(msg, 'Tips:');
                    setTimeout(function () {
                    toastr.clear();
                    }, time)
                }
            }
    </script>
    
    展开全文
  • HTML input 文本框添加提示文字的方法

    千次阅读 2019-10-30 11:34:59
    周未休息,感觉没啥可写的,就水一篇文章吧,说一说前端 html 页面中 input 元素中在没有值的情况下,添加提示的文字,当要输入文字的时候,提示的文字消失。 关于 html input 输入框的提示文字,有两种方法可以实现...
  • 首先先来说说html input标签的属性: 1.type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text"。具体它有那些值,我们后面再讨论。 2.required:标记一个字段是否为必须。如果一...
  • html input文本框、文本域提示文字

    万次阅读 2018-09-25 20:36:27
    html input通过 placeholder属性 在我们文本框和文本域中 增加提示文字(水印) &lt;input class="txt" type="text" placeholder="you name"&gt; &lt;textarea class=&...
  • html input 字体颜色_input使用小技巧

    千次阅读 2020-11-29 16:01:17
     input::-webkit-input-placeholder { color: #ccc; font-size: 15px; }其它浏览器适配方案原文参考:https://webfem.com/post/placeholder②:设置获取焦点后输入文字大小的样式 input:focus { font-si...
  • html input密码显示为*号

    千次阅读 2017-04-12 15:47:00
    html input密码显示为*号 &lt;!DOCTYPE html&gt; &lt;html encoding="utf-8"&gt; &lt;head&gt; &lt;style&gt; *{margin:0;padding:0} ...
  • HTML input 默认值设置

    万次阅读 2018-06-22 10:48:26
    一个好的站点能够做到在一些极其细小的方面对用户(浏览者)体贴入微,为浏览者大开方便之门,今天向你介绍一个自动清除表单输入域的默认值脚本,即当用户在input输入域点
  • 浅析 HTML input value

    千次阅读 2019-07-30 13:52:40
    1. Input 获取 value <input type="text" value="请输入姓名" name="name" id="name"> <script> var name; name = document.getElementById("name").value name = $("#name").val() name = $("i...
  • html input 属性

    千次阅读 2014-10-31 16:47:14
    1.html5的input标签的placeholder属性让提示更爽,不再需要JS进行繁琐的提示。规定帮助用户填写输入字段的提示。
  • html input 提示文字

    千次阅读 2017-02-23 17:24:43
    原文地址:input 提示文字">html input 提示文字作者:王小安input name="passwd_fw" id="passwd_fw" type="password" placeholder="登录密码"  value="" 〉 type=password        提示文字也变成密文 使用...
  • html input标签 单行文本框 多行文本框

    万次阅读 多人点赞 2018-12-22 18:43:24
    input type属性 text 单行文本框 passworld 密码文本框 button 按钮 reset 重置按钮 image 图像形式的提交按钮 radio 单选按钮 checkbox 复选框 hidden 隐藏字段 ...
  • html input type=file

    千次阅读 2018-03-14 09:56:44
    一、 input type=file与文件上传本文所说的input type=file指的是type类型是file的input元素,最简HTML代码如下:&lt;input type=file&gt;但是,为了习惯,我们多写成:&lt;input type="file"...
  • HTML input 输入限制

    千次阅读 2018-10-11 16:57:42
    input onkeyup="value=value.replace(/[/W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/d]/g,''))" ID="Text1" NAME="...
  • HTML INPUT强制关闭输入法

    千次阅读 2008-04-08 13:55:00
    HTML INPUT强制关闭输入法 限定只能输入英文或数字 &lt; input name="input" style="ime-mode:disabled" &gt;
  • html input 只允许数字

    千次阅读 2019-04-27 00:23:00
    oninput="value=value.replace(/[^\d]/g,'')" 转载于:https://www.cnblogs.com/wlgclining/p/10777344.html
  • html input 按钮背景颜色调整

    千次阅读 2020-05-25 17:31:09
    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; // 背景设为白色 -webkit-text-fill-color: #fff; // 字体颜色 } input[type=...
  • HTML开发中经常遇到input元素,往往又需要提示使用者输入一定规则的内容,这时最好的一个方法就是在input里面实现一个提示,实现如下方式:输入框为空时提示内容出现,当输入框获得焦点时或输入框不为空时则消失。...
  • html input 禁用缓存

    万次阅读 2014-09-04 10:22:09
    多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清除缓存记录。 如果不想让浏览器缓存input的值,有2种方法: 方法一:  在不想使用缓存的input中添加 autocomplete="off";  eg: 方法...
  • js 格式化数字,html input type=datetime-local赋值
  • 关于手机端点击HTML input输入框页面放大的问题解决放法
  • HTML Input标签输入限制

    千次阅读 2018-05-13 17:41:21
    input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"&gt; 只能输入英文 &lt;input type="text" onkeyup="this.value=this.value....
  • HTML INPUT标签

    千次阅读 2010-02-22 12:08:00
    classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2> input高级限制级用法1.取消按钮按下时的虚线框 在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容 在input里添加属性值 readonly 3
  • html input框的样式修改

    千次阅读 2018-09-10 18:14:15
    html中,往往我们需要修改input中的placeholder默认文字的样式, 在这个时候主要用到: 在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置...
  • HTML input标签的 accept 属性

    千次阅读 2017-11-23 23:31:19
    input type="file"&gt; 配合使用。它规定能够通过文件上传进行提交的文件类型。提示:请避免使用该属性。永远不要相信用户的输入,应该在服务器端验证文件格式。语法&lt;input accept="value...
  • html input标签 单选按钮 radio

    万次阅读 2018-12-22 19:13:04
    input type="radio" name="单选按钮所在的组名" value="单选按钮的取值"&gt; 相同的 name 属性就是一个组,在这个组中只能单选一个 value 向服务器传递的数据 &lt;!...
  • html input 日期加上范围限制

    千次阅读 2019-09-29 14:05:01
    input id="date" name="dateName" required min="2013-01-01" max="2013-09-23"type="date"/> https://zhidao.baidu.com/question/1493762451327171059.html 转载于:https://www.cnblogs.com/sulanla...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 88,530
精华内容 35,412
关键字:

htmlinput