最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的“当获取焦点时,将fixed的元素改为static;失去焦点,再改回fixed”的方法,然而行不通,我试着给input加了个边框,然而当软键盘弹出时input框并没有移动,仅仅是input中的placeholder上移了,因此只能想到了让placeholder文字在聚焦是为空,在失焦是显示为指定值一下为具体代码

xml
<input id='searchInput' placeholder='{{phValue}}' type="text"  bindfocus='onFocus' bindblur='onBlur'/>
 
js
Page({
// 页面的初始数据
data: {
phValue:"请输入要录入的单词"
},
onFocus: function (e) {
this.setData({
phValue:" "
})
},
onBlur: function (e) {
this.setData({
phValue: "请输入要录入的单词"
})
}
})

小程序中点击input控件键盘弹出时placeholder文字上移的更多相关文章

  1. Android中软键盘弹出时底部菜单上移问题

    当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...

  2. 移动端页面中点击input输入框的时候弹出的键盘将输入框挡住的问题

    使用的是vux框架, 以为是框架问题, 后来发现是把当前页面的高度写死为了height:200%: 只要把高度去掉就能让页面自动弹到输入框的上方:

  3. 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu

    [源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...

  4. 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout

    [源码下载] 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout 作者:webabcd 介绍背水一战 Windows 10 之 ...

  5. 控件(弹出类): ToolTip, Popup, PopupMenu

    示例1.ToolTip 的示例Controls/FlyoutControl/ToolTipDemo.xaml <Page x:Class="Windows10.Controls.Fly ...

  6. 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog

    [源码下载] 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog 作者:webabcd 介绍背水一战 Windows 10 之 控 ...

  7. ocx控件避免弹出警告的类--2

    本文与 OCX控件避免弹出安全警告的类 http://www.cnblogs.com/lidabo/archive/2013/03/26/2981852.html 有些类似,只不过增加了几行代码(红色 ...

  8. input获取焦点软键盘弹出影响定位

    解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() {                                var ...

  9. Android软键盘弹出时布局问题

    最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...

随机推荐

  1. COGS 2479. [HZOI 2016]偏序 [CDQ分治套CDQ分治 四维偏序]

    传送门 给定一个有n个元素的序列,元素编号为1~n,每个元素有三个属性a,b,c,求序列中满足i<j且ai<aj且bi<bj且ci<cj的数对(i,j)的个数. 对于100%的 ...

  2. Git教程:

    使用前配置: git init git config --global user.name "yanpeng1314" git config --global user.email ...

  3. 【深度学习】L1正则化和L2正则化

    在机器学习中,我们非常关心模型的预测能力,即模型在新数据上的表现,而不希望过拟合现象的的发生,我们通常使用正则化(regularization)技术来防止过拟合情况.正则化是机器学习中通过显式的控制模 ...

  4. Jmeter_上传与下载

    今天重点说一下Jmeter的上传与下载 1:Jmeter上传文件 首先确认你的文件名称,参数名称,MIME类型,这些可以从接口文档里面获取,或者直接在页面抓包然后从请求头里面查看.注意,此处我的文件路 ...

  5. 试着把.net的GC讲清楚(1)

    什么是GC? GC(garbage collection)是对内存管理中回收已经不用的内存的一种机制,我们熟知的java和.net都有自己的GC机制,是内存管理的一部分. 为什么会有GC呢?是因为动态 ...

  6. 新闻热词:从爬虫到react native应用

    背景 由于只想了解当天新增的top热词,减少过多信息干扰,打算做一款app实现这个功能. 架构: 热词抓取 -> mysql <=> nodejs <=> nginx & ...

  7. 使用performance进行网页性能监控

    由于项目需要, 需要对网页的一些性能进行监控, 接触到了performance, window.performance 提供了一组精确的数据,经过简单的计算就能得出一些网页性能数据, 将这些数据存储为 ...

  8. Linux下绝对经典的命令

    1.使用远程终端时,可以使用如下命令: screen tmux 2.下载文件可以使用如下命令: curl wget 3.压缩解压缩可以使用: tar .zip.rar 4.使用抓包工具 tcpdump ...

  9. 9、flask之SQLAlchemy

    本篇导航: 介绍 使用 SQLAlchemy-Utils 一. 介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之 ...

  10. Ubuntu16.04下的NetCore环境搭建

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux VSCode安装:http://www.cnblogs.com/dunitia ...