时间戳

首页 > 解决方案 > 在表单焦点上隐藏占位符仅适用于一种表单

php - 在表单焦点上隐藏占位符仅适用于一种表单

问题描述

我正在使用一个jQuery函数来隐藏表单焦点上的占位符文本，这个函数在主页（Index.php）中的表单上完美运行，但是它不适用于使用引导程序（Members.php）设计的其他表单举个例子。我试图看看问题出在哪里，但它似乎不起作用。我不知道Bootstrap和jQuery的版本不兼容是否导致了这个问题？！我正在使用 - jquery-3.4.1.min.js - bootstrap-3.3.7

==========================Backend.js====================== ===========

// here is the jQuery function 
$(function(){
    'use strict';

    // Hide Placeholder On Form Focus
    $('[placeholder]').focus(function (){
        $(this).attr('data-text',$(this).attr('placeholder'));
        $(this).attr('placeholder', '');
    }).blur(function (){
        $(this).attr('placeholder',$(this).attr('data-text'));
    });
});

===============================Index.php================= =====================

// Here is the form where the jQuery function works fine      
<form class="login" action="<?php echo $_SERVER['PHP_SELF']?>" method = "POST">
    <h4 class="text-center">Admin Login</h4>
    <input class = "form-control input-lg" type="text" name="user" placeholder="Username" autocomplete="off"/>
    <input class = "form-control input-lg"  type="password" name="pass" placeholder="Password" autocomplete="new-password"/>
    <input class = "btn btn-lg btn-primary btn-block" type="submit" value="Login" />
</form>

================================Members.php================ ====================

// Function doesn't work on this form
<div class="container">
    <form class="form-horizontal" action="?do=Insert" method="POST">
        <!-- start username field -->
        <div class="form-group">
            <label class="col-sm-2 control-label" >Username</label>
            <div class="col-sm-8">
                <input type="text" name="username" class="form-control" autocomplete="off" required = "required" placeholder="Enter User Name" />    
            </div>
        </div>
    </form>
 </div>

标签： phpjquery

解决方案

var input = $("input");

input.focus(function(){
	$(this).attr("placeholder", " ")
});
input.blur(function(){
	$(this).attr("placeholder", "example")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="example">

推荐阅读