placeholder和value的区别是啥

Posted 2023-04-07

input中的value和placeholder区别
由于html5的出现，使得表单的功能更加强大，input的功能应用起来更加简单，从value到placeholder。但是由于兼容问题，placeholder只适合在移动端的项目，IE6/7/8不支持，只能用value，或者你可以用其他方法模拟placeholder，具体案例你可以看支付宝和财付通的登录和注册页面。下面分别介绍下value和placeholder的实际应用。
value
如果用的是value，我们想鼠标focus后默认文字消失，移开后默认文字又重现，可以这样来写。

placeholder

如果用的是placeholder，我们就不需要JS了，因为它本身就自带focus和blur功能了。但是有时候设计师给我们的设计稿往往跟默认文字颜色是有区别的，那我们如何改变placeholder默认文字颜色呢，如下：
<input type="text" placeholder="请输入手机号" class="inp-fon">
:-moz-placeholder /* Mozilla Firefox 4 to 18 */
color: #f00;


::-moz-placeholder /* Mozilla Firefox 19+ */
color: #f00;


input:-ms-input-placeholder,
textarea:-ms-input-placeholder
color: #f00;


input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder
color: #f00;


一般都是用以上这种方法来处理，这里就不放demo了，比较简单，如果想看效果，把代码复制到网页里查看。 参考技术A placeholder顾名思义是一个占位符。
在你的value为空的时候他才会显示出来，但是他本身并不是value，也不会被表单提交。先显示value,作为表单数据；如果没有value则显示placeholder，一个占位符
placeholder顾名思义是一个占位符。 在你的value为空的时候他才会显示出来,但是他本身并不是value,也不会被表单提交。
value 英[ˈvælju:] 美[ˈvælju]
n. 价值，价格; 意义，涵义; 重要性; （邮票的） 面值;
vt. 评价; 重视，看重; 估价，给…定价;
[例句]The value of this work experience should not be underestimated
这种工作经验的重要性不应该被低估。
[其他] 第三人称单数：values 复数：values 现在分词：valuing 过去式：valued过去分词：valued本回答被提问者采纳

placeHolder和defaultValue的区别

placeHolder和defaultValue的区别

（1）placeHolder用于提示用户，它不与后端进行交互。
（2）defaultValue则是与后端交互时的默认值。
举例说明：在Select框中：

              <Select
                id="stadiumId"
                placeholder={this.state.stadiumName}
                defaultValue={this.state.stadiumId}
                style={{ width: 300 }}
                onChange={e => {
                  this.handleStadium2(e);
                }}
              >

该控件既有placeHolder又有defaultValue属性，那么默认显示的是placeHolder中的内容。
此时如果用户不点击Select框，那么表单提交后，传到后端的值是defaultValue中的内容

注意： 如果控件只有defaultValue属性，那么就显示defaultValue中的内容，传到后端的值也是其中的内容。