input placeholder(怎么在input框中默认加内容)
这篇文章给大家聊聊关于input placeholder，以及怎么在input框中默认加内容对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
placeholder和value的区别是什么
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了，比较简单，如果想看效果，把代码复制到网页里查看。
html中<input> 默认值的样式如何设置
html中<input>默认值的样式设置：
修改隐式的显示文字默认值。可以使用（input::-webkit-input-placeholder{color:#0F0;}）。
修改后默认的灰色的字体颜色会变为自行设置的绿色。
修改用户输入时文字默认值。可以使用（input{color:#CF0;}）。
拓展资料：input{
font-size:1.4em;设置输入框中字体的大小
height:2.7em;设置输入框的高度
border-radius:10px;设置输入框的圆角的大小
border:1px solid#c8cccf;设置输入框边框的粗细和颜色
color:#986655;设置输入框中文字的颜色
outline:0;将输入框点击的时候出现的边框去掉
text-align:center;设置输入框中文字的位置
display:block;将输入框设置为块级元素
}
如何让input的高度增加同时保持文字在底部
要让input高度增加且保持文字在底部，可通过CSS绝对定位结合容器包裹实现，核心思路是隐藏input默认边框，用外部容器控制整体高度与边框，再通过绝对定位将input内容固定在容器底部。以下是具体方法与代码示例：
实现步骤隐藏input默认边框：通过border: none去除原生边框，避免干扰容器布局。创建带边框的容器：使用div作为容器，设置固定高度（如60px）和边框样式（如1px solid#ccc）。绝对定位input到底部：将input设置为position: absolute，配合bottom: 0使其紧贴容器底部，同时设置width: 100%和height: 100%填满容器。修正高度计算模式：添加box-sizing: border-box，确保input高度包含内边距和边框（若后续添加内边距），避免高度溢出。代码示例<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Input文本底部对齐</title><style>.container{ height: 60px;/*容器固定高度*/ border: 1px solid#ccc;/*容器边框*/ position: relative;/*为绝对定位的子元素提供参考*/} input{ height: 100%;/*填满容器高度*/ border: none;/*隐藏默认边框*/ position: absolute;/*绝对定位*/ bottom: 0;/*固定在底部*/ width: 100%;/*填满容器宽度*/ box-sizing: border-box;/*修正高度计算模式*/}</style></head><body><div class="container"><input type="text" placeholder="请输入文本"></div></body></html>关键点说明容器作用：通过div容器统一控制高度和边框，避免直接修改input导致布局问题。绝对定位原理：position: relative的容器为input的绝对定位提供参考坐标系，bottom: 0使input底部与容器底部对齐。高度计算优化：box-sizing: border-box确保input高度计算包含边框和内边距（若后续添加），避免因默认content-box模式导致高度超出容器。替代方案（不推荐）若需避免额外容器，可通过padding模拟底部对齐，但需手动计算padding-top值，且灵活性较差：
input{ height: 60px; padding-top: 40px;/*手动调整值使文本下移*/ box-sizing: border-box;}缺点：需根据高度和字体大小精确计算padding-top，且无法动态适应高度变化。
总结推荐使用容器包裹+绝对定位方案，其优势在于：
高度调整灵活，仅需修改容器高度即可。文本始终紧贴底部，不受input高度变化影响。代码简洁，兼容性强，适用于大多数现代浏览器。
OK，关于input placeholder和怎么在input框中默认加内容的内容到此结束了，希望对大家有所帮助。