专栏首页OECOM给input填充提示文字

给input填充提示文字

很多时候我们发现input输入框里有提示文字,当我们输入内容后,提示文字消失,不输入内容,提示文字出现,这里我来介绍两种方式来实现。

第一种方式是通过js的方式来实现,首先我们从input的获取焦点和失去焦点两个事件,预先将提示文字写在input的value值里,例如<input id="inp" value="我是提示文字" />,这样我们在看到的效果里就会是文本框里有我是提示文字的文字了,当我们点击文本框即文本框获取到了焦点,这时将value的值设置为空,例如:

function removeWenzi(){
   $("#inp").val("");

}

这时给input添加onfocus事件,例如<input id="inp" onfocus="removeWenzi()" value="我是提示文字" />这样我们点击文本框的时候文字就会消失。当输入结束时,需要判断一下用户是否输入了,如果没有输入则出现提示文字,否则不出现,例如:

function addWenzi(){
   if($("inp").val()==""){
      $("inp").val("我是提示文字");
}

}

这时,给input添加onblur事件,例如<input id="inp" onblur="addWenzi()" onfocus="removeWenzi()" value="我是提示文字" />

第二种方法就是直接给input添加placeholder,例如<input placeholder="我是提示文字" />即可,效果和上面的那种方法大体相同。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js判断input是否为空

    在进行注册时经常会遇到需要判断用户是否在文本框内输入了数据,那么就需要判断一下,一开始我感觉这是一个非常简单的问题。我的思路是获取input元素,判断他的元素是...

    无邪Z
  • flex弹性布局

    网页布局在前端开发中是一个很重要的点,在传统布局解决方案中,一般是基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于...

    无邪Z
  • js的深拷贝和浅拷贝

    说到深拷贝与浅拷贝,为什么会有这两种概念呢,根本原因就在于js的两种数据类型:基本数据类型和引用数据类型,两种数据类型存储方式不同。

    无邪Z
  • Js输入验证

    用户7657330
  • Django 模板HTML中 变量 过滤器 标签 的使用方法

    一、变量 1.变量的形式是:{{variable}}, 当模板引擎碰到变量的时候,引擎使用变量的值代替变量。 2.使用dot(.)能够访...

    学到老
  • Log4Net ,.net和SQL Server的完美结合

    用户1258909
  • 基于现如今流行的SSM(spring springMVC mybatis mysql)框架的hrm人事管理系统后台实例

    采用了注解的方式开发,一个简单的人事管理系统,包括文件下载上传,公告管理以及用户/职位/部门的增删改查等基本操作

    洋仔聊编程
  • 译|通过构建自己的JavaScript测试框架来了解JS测试

    测试(单元或集成)是编程中非常重要的一部分。在当今的软件开发中,单元/功能测试已成为软件开发的组成部分。随着 Nodejs 的出现,我们已经看到了许多超级 JS...

    Dunizb
  • 助力企业战疫提效保质,腾讯WeTest远程办公工具包请查收!

    ? 导语   疫情当前,减少个人的出行与聚集成为了抗击疫情的重要防线。不少企业为了员工的安全与战疫的目标,开始实行在家远程办公的措施。作为开发测试人员,对工作...

    WeTest质量开放平台团队
  • DeepMind研究:测试神经网络的抽象推理

    机器能学会抽象推理吗?这是谷歌子公司DeepMind发表的一篇新论文的主题,题为“Measuring abstract reasoning in neural ...

    AiTechYun

扫码关注云+社区

领取腾讯云代金券