微信小程序input的placeholder脱离文档流

这篇具有很好参考价值的文章主要介绍了微信小程序input的placeholder脱离文档流。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天进行真机调试时input的提示词 placeholder脱离了文档流,但是奇怪的是input框没有脱离文档流

如下图所示:

微信开发工具正常:                                 真机:不正常 脱离文档流

微信小程序input的placeholder脱离文档流,微信小程序,小程序             微信小程序input的placeholder脱离文档流,微信小程序,小程序

解决方法:

<view class="view_input">
		<input type="text" placeholder="有话要说,快来评论" >
</view>

 css 加上定位

.view_input{
		//.........
		input{
			background-color: skyblue;
			position: relative;
		}
		input::-webkit-input-placeholder {
		  position: absolute;
		  top: 0;
		}
	}

 效果:

微信小程序input的placeholder脱离文档流,微信小程序,小程序

这里记录一下

 文章来源地址https://www.toymoban.com/news/detail-573555.html

到了这里,关于微信小程序input的placeholder脱离文档流的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • placeholder样式自定义(uniapp 微信小程序、h5)

    一、使用uniapp开发 ①第一种方式:(写在行内) ②第二种方式: (给input加上placeholder-class属性,然后给该属性 设置一个类名,在style中设置样式。) 二、使用H5开发

    2024年02月09日
    浏览(31)
  • 微信小程序textarea的placeholder的行高怎么修改

    目前不支持修改行高。如果你的内容设置了行高但是placeholder没有行高会导致输入内容的时候感觉不是对齐的,想要解决这个问题怎么办呢/ 我们可以自己写个text假装是placeholder的内容。然后textarea获取焦点输入内容的时候就不显示这个text的内容。

    2024年02月02日
    浏览(34)
  • 微信小程序 - 修改多行文本输入框 placeholder 属性换行显示文字样式的详细教程

    多行文本输入框是微信小程序中常用的组件之一,而placeholder属性则用于在输入框中显示提示文本。然而,默认情况下,placeholder属性中的文字无法实现换行显示,这可能会导致在一些情况下显示不完整或不够明确。在本篇教程中,我将详细介绍如何修改多行文本输入框的pl

    2024年02月03日
    浏览(35)
  • 小程序中修改input的placeholder字体颜色样式

    3. wxss 示例

    2024年03月25日
    浏览(37)
  • 微信小程序中如何设置textarea或者van-field中的placeholder换行显示

    微信小程序中如何设置textarea中的placeholder换行显示 van-field 中直接修改textarea 标签的样式即可  

    2024年02月12日
    浏览(33)
  • 小程序input的placeholder不垂直居中的问题解决

    input的placeholder不垂直居中,input设置高度后,使用line-height只能使输入的文字垂直居中,但是placeholder不会居中,反而会偏上。 首先placeholder样式自定义 有两种方法,第一种行内样式: 第二种加类名: 给input加上placeholder-class属性,然后给该属性 设置一个类名,在style中设置

    2024年02月11日
    浏览(27)
  • 微信小程序 input 事件

    在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下: 1 通过 bindinput,可以为文本框绑定输入事件 input value=\\\"{{msg}}\\\" bindinput=\\\"inputHandler\\\"/input 2 在页面的 .js 文件中定义事件处理函数 1 定义数据 2 渲染结构 3 美化样式 4 绑定 input 事件处理函数 input value=\\\"{{msg}}\\\"

    2024年02月15日
    浏览(28)
  • 微信小程序input异常聚焦

    如上图所示,在小程序弹窗内第一行有Input和2个按钮。 异常是在真机上点击取消按钮隐藏弹窗时,input会异常聚焦,页面显示异常,会显示为Input框内值,并自动拉起小键盘。在真机点击小键盘任意键或者隐藏小键盘可消除残影。  尝试当惦记取消按钮时,设置input的focus为

    2024年02月07日
    浏览(42)
  • 微信小程序——输入框input

    bindevent.wxss中代码: bindevent.wxml中代码: class=\\\"myinput\\\": 通过 class 属性设置该输入框的样式类,可以在 WXSS 中通过样式类来定义该输入框的样式。 bindinput=\\\"changeContent\\\": 通过 bindinput 属性将输入框的输入事件绑定到名为 changeContent 的事件处理函数上。当用户在输入框中输入内容时

    2024年02月07日
    浏览(38)
  • 微信小程序-----input数据双向绑定

    这里介绍两种获取的方式: 1、用户每输入一个字节就获取一个字节 2、用户全部输入结束了之后,再一起获取整个input输入框的值 注意:第二种方式会比较节省内存资源 第一种方式:         原理:我们使用bindinput事件来获取input的输入值,然后根据dataset获取要跟 data数组里

    2024年02月08日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包