zoukankan      html  css  js  c++  java
  • input 输入框提示信息

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>html input 输入框提示(hint)内容的实现</title>
    </head>
    <style type="text/css">
    form{400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}
    label{display:block;height:40px;position:relative;margin:20px 0;}
    span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}
    .input_txt{398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;}
    .input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}
    .border_radius{border-radius:5px;color:#B00000;}
    h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;}
    </style>
    <body>
    <form action="/testform.asp" method="get">
    <input type="text" name="zip_code" pattern="[0-9]{6}" placeholder="请输入0-9的6位数编码"/>
    <input type="submit" value="Submit"/>
    </form>
    <form class="border_radius" id="focus">
    <h2>聚焦型提示语消失</h2>
    <label><span>用户名或邮箱地址</span><input type="text" class="input_txt border_radius" /></label>
    <label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
    </form>
    <form class="border_radius" id="keydown">
    <h2>输入型提示语消失</h2>
    <label><span>用户名或邮箱地址</span><input type="text" class="input_txt border_radius" /></label>
    <label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
    </form>
    </body>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

    $("#focus .input_txt").each(function(){
    var thisVal=$(this).val();
    //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
    if(thisVal!=""){
    $(this).siblings("span").hide();
    }else{
    $(this).siblings("span").show();
    }
    //聚焦型输入框验证
    $(this).focus(function(){
    $(this).siblings("span").hide();
    }).blur(function(){
    var val=$(this).val();
    if(val!=""){
    $(this).siblings("span").hide();
    }else{
    $(this).siblings("span").show();
    }
    });
    })
    $("#keydown .input_txt").each(function(){
    var thisVal=$(this).val();
    //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
    if(thisVal!=""){
    $(this).siblings("span").hide();
    }else{
    $(this).siblings("span").show();
    }
    $(this).keyup(function(){
    var val=$(this).val();
    $(this).siblings("span").hide();
    }).blur(function(){
    var val=$(this).val();
    if(val!=""){
    $(this).siblings("span").hide();
    }else{
    $(this).siblings("span").show();
    }
    })
    })
    })
    </script>
    </html>

  • 相关阅读:
    Android开发 ViewConfiguration View的配置信息类
    Android 开发 倒计时功能 转载
    Android 开发 关于7.0 FileUriExposedException异常 详解
    Android 开发 实现文本搜索功能
    Android 开发 Activity里获取View的宽度和高度 转载
    Android 开发 存储目录的详解
    Android 开发 Fresco框架点击小图显示全屏大图实现 ZoomableDraweeView
    Android 开发 将window变暗
    Android 开发 DisplayMetrics获取Android设备的屏幕高宽与其他信息
    Android 开发 DP、PX、SP转换详解
  • 原文地址:https://www.cnblogs.com/mymission/p/7340086.html
Copyright © 2011-2022 走看看