js实现输入框仿html5 placeholder功能

最新推荐文章于 2021-04-29 18:06:34 发布

HelloNet

最新推荐文章于 2021-04-29 18:06:34 发布

阅读量5.2k

点赞数

分类专栏： jQuery JavaScript

本文链接：https://blog.csdn.net/sscrazy/article/details/9426461

版权

本文介绍了如何使用JavaScript模拟HTML5的placeholder功能。通过将label定位在输入框上方，并根据输入内容动态显示或隐藏label，为不支持placeholder的浏览器提供类似体验。提供了一段可以直接运行的代码示例。

摘要由CSDN通过智能技术生成

思路是将label定位到输入框上面，根据输入框内容判断显示或者隐藏label，当然如果浏览器支持html5则就使用placeholder功能就ok了，所以可以预先判断一下是否支持。方法很简单，下面代码直接运行可以实现效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript" src="jquery-1.8.2.js"></script>
  <style type="text/css">
	ul,li{list-style:none;margin:5px 0px;padding:0px;}
	.label-text-tips{margin-bottom:-30px;float:left;color:black;height:25px;line-height:20px;color:#ccc;}
	.txt-mobile{position:relative;z-index:22;background-color:transparent;border:solid 1px #ccc;}
  </style>
  <script type="text/javascript">
  <!--
	$(document).ready(function(){
	    if (!IsPlaceholderSupport())
	    {
			CopyPlaceholder("la","txt_mobile"

最低0.47元/天解锁文章

HelloNet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现输入框仿html5 placeholder功能

思路是将label定位到输入框上面，根据输入框内容判断显示或者隐藏label，当然如果浏览器支持html5则就使用placeholder功能就ok了，所以可以预先判断一下是否支持。方法很简单，下面代码直接运行可以实现效果。 New Document ul,li{list-style:none;margin:5px 0px;padding:0px;} .la
复制链接

扫一扫

专栏目录