textarea placeholder？input的placeholder属性

大家好，textarea placeholder相信很多的网友都不是很明白，包括input的placeholder属性也是一样，不过没有关系，接下来就来为大家分享关于textarea placeholder和input的placeholder属性的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！

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表单]1.textarea(多行文本域)

浏览器将表单的数据打包后发送给服务器,服务器接收后转由程序处理。

<form>表单元素</form>

表单本身不可见,只是一个区域。

语法：

<input/>

属性：

1)type(类型)

可选值：

text(文字域) password(密码域) file(文件域,不同浏览器显示不同) checkbox(复选域,同组name值最好一样.以便服务器区分) radio(单选域,同一组的name值要相同) button(按钮) submit(提交按钮) reset(重置按钮) hidden(隐藏域,用户看不到但可传递到服务器) image(图像域,实际是按钮的功能) checked(单选多选设置默认值)

2)name(文字域的名称)

3)maxlength(最大字符长度)

4)size(文本框的宽度,字符个数为单位,默认20)

5)value(文本框默认值,是要提交给服务器的值)

6)placeholder(提示信息)

2)<select>-菜单和列表标签<option>-菜单和列表项目标签

优点：

节约网页空间。

语法：

<select>

<option value="">选项1</option>

</select>

select属性：

1)name(名称)

2)multiple(设置可选择多个,会从下拉菜单变为列表菜单,按住ctrl可多选)

3)size(设置列表可见选项数目,会从下拉菜单变为列表菜单)

option属性：

1)selected(默认选中)

2)value(传送给服务器的值)

3)<optgroup>-菜单和列表项目分组标签

语法：

<select>

<optgroup label="组名">

<option>选项</option>

</optgroup>

</select>

4)<textarea>-文字域标签(多行)

语法：

<textarea>内容</textarea>

注意：

开始标签和结束标签之间不要有换行或者空格。

属性：

1)name(名称)

2)placeholder(提示信息)

3)rows(可见行数)

4)cols(可见宽度,只是大约数据)

微信小程序中textarea与input的问题总结

微信小程序中textarea与input组合使用时的常见问题及解决方案总结如下：

1. bindkeyboardheightchange事件异常触发

当仅为textarea绑定bindkeyboardheightchange事件时，input组件可能意外触发该事件，且携带的参数均为textarea的配置。此问题在安卓设备上必现，目前尚未找到通用解决方案，需通过兼容性测试规避。

2. hold-keyboard属性冲突

若将textarea和input的hold-keyboard属性均设为true，且input的type非text（如number），连续切换输入框会导致键盘上方的“完成”按钮卡住，且无法重新聚焦textarea。安卓设备必现。

解决方案：

通过show-confirm-bar隐藏textarea的完成按钮；将所有input的type统一设为text；避免设置hold-keyboard为true。3. textarea穿透fixed元素

当页面存在fixed定位元素时，textarea可能无视z-index层级关系穿透该元素。安卓设备偶现，且重新编译或预览后可能持续存在，删除小程序后重新安装可能缓解。

解决方案：在需要覆盖textarea时，动态隐藏textarea或替换为view组件。

4. bindfocus事件误触发

仅绑定textarea的bindfocus事件后，若先点击textarea再立即点击input，可能触发textarea的聚焦事件。安卓设备偶现。

解决方案：通过状态管理动态控制聚焦逻辑，并避免将input的type设为number。

5. transition动画导致placeholder闪烁

在键盘抬起过程中手动调整页面位置（如通过bottom或translateY）并设置transition动画时，textarea的placeholder可能闪烁。安卓设备必现。

解决方案：区分机型处理，仅对iOS设备添加transition属性。

6.完成按钮不触发键盘高度事件

绑定bindkeyboardheightchange事件后，点击键盘自带完成按钮时，事件可能不触发。安卓设备偶现，目前无通用解决方案。

7. auto-height高度获取异常

当textarea的auto-height为true时，通过selectComponent获取高度可能返回初始高度或默认高度。iOS和安卓均存在。

解决方案：动态控制auto-height值，或使用定时器延迟获取高度。

8.键盘高度不一致

多次触发bindkeyboardchange事件时，获取的keyboardHeight可能包含或排除完成按钮的高度。安卓设备偶现，无通用解决方案。

9.数据精度问题

通过selectComponent获取元素尺寸或位置时，默认保留16位小数，可能导致动画计算错误。iOS和安卓偶现。

解决方案：手动截取小数点后两位进行计算。

如果你还想了解更多这方面的信息，记得收藏关注本站。