input中的value和placeholder

Posted on | In |

input中value和placeholder区别

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
注释：placeholder 属性适用于以下的 类型：text, search, url, telephone, email 以及 password。

value 属性为 input 元素设定值。

1
2
3
4
5
6
对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值

注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

注意
placeholder在input中只是充当占位符的角色，在你input框中的value为空的时候它才会显示出来，但是它本身并不是value，也不会被表单提交。

value
如果用的是value，我们想鼠标focus后默认文字消失，移开后默认文字又重现，可以这样来写。

1
2
3
4
5
6
7
8
9
10
11
12
<input type="text" value="请输入手机号" class="inp-fon">
$(".inp-fon").focus(function(){
          var oldValue = $(this).val();
          if(oldValue == this.defaultValue){
              $(this).val("").addClass('focus-fon');
          }
      }).blur(function(){
          var oldValue = $(this).val();
          if(oldValue == ""){
               $(this).val(this.defaultValue).removeClass('focus-fon');;
          }
      });

默认状态是灰色的，然后focus后，输入的字体会变成黑色的，上面的JS里就是通过添加和删除样式“focus-fon”来控制的。

修改输入框placeholder默认颜色

1
2
3
4
5
input::placeholder{/* 去掉私有前缀，谷歌和火狐有效；IE和edge无效 */
     color: orchid;
     opacity:1;
     font-size: 15px;
 }

参考博客
https://blog.csdn.net/xufeiayang/article/details/52786167
https://blog.csdn.net/tashanhongye/article/details/76423081
https://blog.csdn.net/J080624/article/details/79312870