zoukankan      html  css  js  c++  java
  • JavaScript实现文本框和密码框placeholder效果(兼容ie8)

    文本框:

    方法一:

    <input type="text" id="add-usbkey-authentication-modal-name" class="form-control"
    value="长度为3-128的数字和字母" name="addUsbkeyAuthenticationModalName"
    onfocus="if(value=='长度为3-128的数字和字母') {value=''}" 
    onblur="if (value=='') {value='长度为3-128的数字和字母'}"
    />

    方法二: 

    <input type="text" name="hotGoods" id="search">
            $(document).ready(function () {
                $("#search").val('请输入您要搜索的内容').css('color', '#ccc');
                replacePlaceholder($("#search"));
            });
    
            function replacePlaceholder(input) {
                var originalvalue = input.val(); //请输入您要搜索的内容
    
                // console.log(originalvalue);
                input.focus(function () {
                    if ($.trim(input.val()) == originalvalue) {
                        input.css('color', '#333');
                        input.val('');
                    }
                });
    
                input.blur(function () {
                    if ($.trim(input.val()) == '') {
                        input.css('color', '#ccc');
                        input.val(originalvalue);
                    }
                });
            }

    密码框:

    <input type="text" value="长度为12-16的数字和字母" id="add-chap-modal-password-show"  class="form-control"/>
    <input type="password" id="add-chap-modal-password" style="display: none" name="addChapModalPassword" class="form-control"/>
            $('#add-chap-modal-password-show').focus(function () {
                var text_value = $(this).val();
                if (text_value == this.defaultValue) {
                    $('#add-chap-modal-password-show').hide();
                    $('#add-chap-modal-password').show().focus();
                }
            });
            
            $('#add-chap-modal-password').blur(function () {
                var text_value = $(this).val();
                if (text_value == "") {
                    $('#add-chap-modal-password-show').show();
                    $('#add-chap-modal-password').hide();
                }
            });
  • 相关阅读:
    kerberos系列之zookeeper的认证配置
    kafka概念扫盲
    linux不常用命令
    linux环境安装pip
    Hbase概念原理扫盲
    python语言中三个奇妙的返回值
    python通过http(multipart/form-data)上传文件的方法
    tp5.1 模型设置了软删除,detach 不能删除中间表的问题
    tp5.1 where in 写法
    tp 5.1 使用模型查询结果集插入另一个模型的问题
  • 原文地址:https://www.cnblogs.com/samve/p/13904672.html
Copyright © 2011-2022 走看看