微信小程序input的placeholder的字体会上移或下移

placeholder文字在聚焦是为空,在失焦是显示为指定值

xml

<input type="text" class="searchInpt" placeholder="{{searchValue}}}"  bindfocus="focusFn" bindblur="blurFn"/>

js

Page({

  

data: {

searchValue:"请输入关键词"

},

focusFn:function(e){

this.setData({

searchValue:""

})

},

blurFn:function(e){

this.setData({

searchValue:"请输入关键词"

})

}

})

原文地址:https://www.cnblogs.com/Waiting-Liang/p/12111115.html

时间: 2024-11-25 01:01:37

微信小程序input的placeholder的字体会上移或下移的相关文章

微信小程序 input 的 type属性 text、number、idcard、digit 区别

微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数字键盘(有小数点) 注意:number 是无小数点的,digit 是有小数点的 输入时键盘只能出现相应的数字键盘 转发自:https://blog.csdn.net/yelin042/article/details/72519138 原文地址:https://www.cnblogs.com/firs

微信小程序 input使用letter-spacing失效问题

根据ui设计稿, 本来思路是一个input搞定,下面的线使用背景图 background:url('/images/line.png')no-repeat bottom center; 然后使用letter-spacing,让字体间隔开. 但是遇到了小程序的坑,letter-sapcing在input中没效果. 于是我gitlab上找到一个,模拟光标输入框的源码,并抄袭了作者的思路.(链接如下:https://github.com/evan2020/six-Input-box) 于是我的新思路是

第十一篇、微信小程序-input组件

主要属性: 效果图: ml: <!--style的优先级比class高会覆盖和class相同属性--> <!--头像--> <view style="display:flex;justify-content: center;"> <image style="width:130rpx;height:130rpx;border-radius:50%;margin-top:10%;" src="../../image/l

微信小程序获取输入框(input)内容

微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type="tel" bindinput="getInput" /> js Page({ data:{ getInput: null }, getInput:function(){//方法1 this.data.getInput = e.detail.value; }, /

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序给input、picker、textarea编写统一的更新数据逻辑

wepy开发小程序 以input为例,微信小程序没有数据双向绑定,input要显示绑定的数据即value等于一个绑定的量 <input type="text" value="{{inputdata}}"/> data = { inputdata: '数据' } 当在input中改变内容后,inputdata并不会变化,需要绑定事件,通过编写程序来改变inputdata. 但开发过程中如果input等表单控件很多的话,这些事件一个一个写就会感到很麻烦,所以

微信小程序判断input是否为空

微信小程序中用到input值时候,判断其内容是否为空,可以用if-else判断内容的length,也可以给input加点击事件,判断其内容:以下是我解决问题的过程wxml代码 <view class="name"> <text>姓名</text> <input type='text' placeholder='收货人姓名' value="{{userName}}" bindblur='username'></in

微信小程序开发-地图map组件上使用input组件

微信小程序开发-地图map组件上使用input组件 标签: 微信小程序 uni-app 原生组件层级关系 微信小程序在最高层级 在微信小程序中原生组件包括camera canvas input(仅在focus时表现为原生组件) live-player live-pusher map textarea video 在微信小程序开发中原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 后插入的原生组件可以覆盖之前的原生组件. 原生组件还无法在 pic

获取微信小程序的input控件的value

习惯了vue的方式,我以为javascript世界默认是双向绑定的.可...微信小程序除外,虽然显示值还是value={{jsproperty}}.整个文档也没有直接告诉你怎么去获取一个input的录入值,这几乎是所有文档中仅次于"hello world"的说明了. 如何获取呢?大体上两种办法: 一是利用控件本身的事件,不断的刷新data里的某个属性值,常用是bindinput.bindblur.前者是录入时处理,后者是控件失去焦点时处理.如果每个控件都需要一个绑定的方法,这当然是可怕