liaooo

标签： input

  • 解决input中accept反应慢的问题

    原因

    accept= 'image/*'会对每一个文件都进行一次遍历，在webkit内核的浏览器内校验时间较长，是此种内核浏览器的bug。

    解决

    将 * 通配符修改成指定的MIME类型

    <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" />

  • input标签的属性

    <input>常用type

    默认类型为 text

    Type描述
    button没有默认行为的按钮，上面显示 value 属性的值，默认为空
    checkbox复选框
    color用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器
    radio单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个
    file让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。
    hidden不显示的控件，其值仍会提交到服务器
    image带图像的 submit 按钮.显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。
    password密码框
    search输入文本中的换行会被自动去除

    #<input>_types

    <input>常用属性

    属性描述
    checked用于控制控件是否被选中
    disabled表单控件是否被禁用
    maxlengthvalue 的最大长度（最多字符数目）
    nameinput 表单控件的名字。以名字/值对的形式随表单一起提交
    placeholder当表单控件为空时，控件中显示的内容
    required必填项

    #属性

  • CSS3 placeholder字体颜色大小

    一、须知

    placeholder属性是CSS3中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占位文本。

    二、设置placeholder文字颜色、字号

    方式1：因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。

    ::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
  font-size: 16px;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
  font-size: 16px;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #999;
  font-size: 16px;
}

    方式2：建议使用该方式 如果是在手机客户端webview 只使用－webkit内核方式即可。

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #666;
  font-size: 16px;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #666;
  font-size: 16px;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #666;
  font-size: 16px;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #666;
  font-size: 16px;
}