首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

利用placeholder属性来添加输入框默认文字提示,提高用户体验

一、JS 控制默认文字 先说一下问题: 用 HotNewspro 主题的网站,默认的留言输入框是这样的: ? 常规情况下,光标聚焦留言输入框,这个预设提示文字是会自动消失的: ?...鼠标 onclick 点击,判断输入框是不是初始的【默认提示文字】,如果是就清空; b. 鼠标光标离开输入框,判断输入框里面是否为空,如果为空就自动填入【默认提示文字】。...不过在上文插入表情的那种情境下,就出问题了:点击插入表情,并没有对输入框触发 onclick 动作,于是默认文字并未清空就填入表情了,然后就算鼠标离开输入框,由于默认文字发生改变,也就不会自动清空了!...当然,针对上文问题情境,完全可以通过给【点击表情这个动作】绑定一个清空预设文字功能,点击表情先判断输入框是否是【默认提示文字】,如果是就先清空,然后在插入表情,从而解决问题。...先来看一个 demo: 可以发现,输入任意内容后,预设文字将会自动消失!和上文 JS 同样的效果,却简单得多!!

3.5K90

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

另外一种情况(一般在页面内容很少时 iphone5及以上常发生),当输入框弹出 fixed元素挤到输入框上,当输入框消失时, fixed元素并没有随着输入框消失而回到底部,这是因为整个视窗的高度还保持在...减去键盘的 高度,需要手动去触发让视窗高度回到正常,然后试了很多方法都没成功,后来的方案是输入框消失时给页面加隐形的很大的 padding比如 1000px并在 30ms后改为正常 13.禁止用户选中文字...解决:利用 js获取文字 line-height再去设置 div高度  18.使用 background, background-position里使用了比如 center left后不能再加具体的数值去定位...以上面的例子来说,解决方案视情况而定:  ① tap让遮罩渐隐消失,这个过程超过 400ms就不会穿透到下一层去了  ② 在 touchend事件回调中加入 preventDefault, 并在下一层中加上...4.微信 jssdk里预览图片接口,图片的 url不能填 base64编码, ios上会很卡,估摸着微信得卡个 5秒左右才打得开,而 android上压跟就卡住或者一直卡在读取图片界面 5.微信当在输入框里输入消息

3.6K40

给input填充提示文字

很多时候我们发现input输入框里有提示文字,当我们输入内容后,提示文字消失,不输入内容,提示文字出现,这里我来介绍两种方式来实现。...第一种方式是通过js的方式来实现,首先我们从input的获取焦点和失去焦点两个事件,预先将提示文字写在input的value值里,例如,...这样我们在看到的效果里就会是文本框里有我是提示文字文字了,当我们点击文本框即文本框获取到了焦点,这时将value的值设置为空,例如: function removeWenzi(){ $("#inp...").val(""); } 这时给input添加onfocus事件,例如这样我们点击文本框的时候文字就会消失...当输入结束,需要判断一下用户是否输入了,如果没有输入则出现提示文字,否则不出现,例如: function addWenzi(){ if($("inp").val()==""){ $(

2.2K20

uniapp 中的交互反馈 API【提示框】

必填 说明 title string 是 提示的内容,可显示的长度和 icon 取值有关 icon string 否 提示框的图标,可取值详见下方说明 mask boolean 否 是否防止触摸穿透,默认...} 然后就可以更加方便的使用消息提示框: toast('操作成功') toast('操作成功', '/pages/login/login') toast('操作成功', () => { // 消息提示消失后自动执行该函数..., // 标题 content: '永久删除不可恢复', // 内容(灰色字体) showCancel: true, // 显示取消按钮 cancelText: '取消', // 取消按钮文字 cancelColor...: '#000000', // 取消按钮颜色 confirmText: '确定', // 确定按钮文字 confirmColor: '#007aff', // 确定按钮颜色 editable: false..., // 是否显示输入框 placeholderText: '请输入' ,// 显示输入框的提示文本 success: ({ confirm }) => { if (confirm) { console.log

2.3K20

iOS-UITextField 全面解析iOS中UITextField 使用全面解析UITextField的代理方法通知UITextField 在storyboard 中设置属性

UITextFieldViewModeAlways  一直出现 } UITextFieldViewMode; //输入框中一开始就有的文字 text.text = @"一开始就在输入框文字"; /...– textRectForBounds:    //重写来重置文字区域 – drawTextInRect:    //改变绘文字属性.重写时调用super可以按默认图形属性绘制,若自己完全重写绘制函数...shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{ //当用户使用自动更正功能,把输入的文字修改为推荐的文字...当这个文本框中输入了数据,用于提示的灰色的字将会自动消失。 3、Background :背景图片 4、Disabled : 若选中此项,用户将不能更改文本框内容。...19、Secure : 当你的文本框用作密码输入框,可以选择这个选项,此时,字符显示为星号。

6.9K60

挥别web移动端开发差异和经典坑

描述:在 iOS 上,输入框默认有内部阴影,无法使用 box-shadow 来清除 解决: input, textarea { /* 方法1: 去掉边框 */ border: 0;.../* 方法2: 边框色透明 */ border-color: transparent; /* 方法3: 重置输入框默认外观 */ -webkit-appearance:...问题 描述: iOS系统中JS转换字符串变日期对象的时候,字符串格式必须是/相隔,通常情况是-相隔,在微信小程序IOS环境中同样出现出现此问题 iOS系统对js中的new Date()方法有格式要求 let...(中文输入法)下,进行判断限制,仅在选词后触发input事件 描述:在使用oninput监控输入框内容变化时,我们期望仅在value值变化时,才触发oninput事件,而在中文输入下,未选词的按键也会触发...(使用输入法输入的过程中) compositionend: 在输入法编辑器的文本复合系统关闭触发,表示返回正常键盘输入状态(选中文字,输入法消失的那一刻) 判断限制: $('#input').

2.8K20

Android富文本开发

12.如何删除图片或者文字 当富文本处于编辑状态,点击删除图片是可以删除图片的,对于删除的逻辑,封装的lib可以给开发者暴露一个删除的监听事件。...如何运用到插入或者删除图片场景中 向一个ViewGroup添加控件或者移除控件,这两种效果的过程是应对应于控件的显示、控件添加其他控件的位置移动、控件的消失、控件移除其他控件的位置移动等四种动画效果...DISAPPEARING:元素在容器中消失时需要动画显示。 CHANGE_DISAPPEARING:由于容器中某个元素要消失,其它元素的变化需要动画显示。...stateVisible-可见状态:当设置为这个状态,软键盘总是可见的,即使在界面上没有输入框的情况下也可以强制弹出来出来。...,会将布局顶起(保证输入框不被遮挡),不压缩,而且可以软键盘不消失的情况下,手动滑出被遮挡的布局; adjustPan-默认模式:软键盘弹出,软键盘会遮挡屏幕下半部分布局,当输入框在屏幕下方布局,软键盘弹起

8.4K20

iOS UITextField详解

UITextFieldViewModeAlways 一直出现 } UITextFieldViewMode; 输入框设置文字 text.text = @"一开始就在输入框文字"; 密文输入 text.secureTextEntry...– textRectForBounds:   //重写来重置文字区域 – drawTextInRect:   //改变绘文字属性.重写时调用super可以按默认图形属性绘制,若自己完全重写绘制函数...textFieldShouldEndEditing:(UITextField *)textField{ //返回BOOL值,指定是否允许文本字段结束编辑,当编辑结束,文本字段会让出first responder //要想在用户结束编辑阻止文本字段消失...shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{ //当用户使用自动更正功能,把输入的文字修改为推荐的文字...if (self.myTextField == textField) //判断是否我们想要限定的那个输入框 { if ([toBeString length]

1.7K30

去除ArcGIS JS API 4.16实例化后的地图拖动默认自带的5px的外边框

当我们用ArcGIS JS API 4版本实例化完一张二维地图的时候,鼠标移入地图区域内进行点击,在地图周围会出现一个5像素的黑色边框,虽然不影响其他功能,但是看起来不太美观,所以本文介绍下如何去除ArcGIS...JS API 4.16实例化后的地图拖动默认自带的5px的外边框,这种方法对4版本的API都是通用的。...问题描述 使用ArcGIS JS API 4.16实例化完地图后,当我们的鼠标拖动地图发现地图的四周会默认自带一圈的外边框,这在我们的系统中看起来是很不协调的,大致样子如下所示: 就像上图中的四周,...有一圈黑色的外边框,但是当我们鼠标移除的时候它会自动消失,所以这就很不舒服,今天就给大家介绍下该如何去除这个烦人的外边框。...important; } 2、通过在样式文件中写进去那两行自定义样式后,就发现拖动地图不再有默认的边框了。

1.1K30

AngularDart Material Design 输入 顶

如果为false,则在文本输入框标签会消失。如果为真,则它会“漂浮”在输入之上。 hintText String  要在输入上显示的提示。...如果没有在文本框中输入任何内容,则显示默认文本。当用户输入文本,它会消失。...如果为false,则在文本输入框标签会消失。如果为真,则它会“漂浮”在输入之上。 hintText String  要在输入上显示的提示。...当需要可见标签,请使用标签代替此标签。 label String  此输入的标签。 如果没有在文本框中输入任何内容,则显示默认文本。当用户输入文本,它会消失。...如果为false,则在文本输入框标签会消失。如果为真,则它会“漂浮”在输入之上。 hideCheckbox bool  是否隐藏选择项之前的复选框以进行多选。

5.2K40
领券