问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

显示/隐藏占位符文本

社区维基
1
新手上路，请多包涵

我有几个带有占位符的文本框，例如：

 <input class="form-control" id="txtAddress" placeholder="Address" type="text">
<input class="form-control" id="txtZip" placeholder="Zip Code" type="text">

当我调用 SetErrorStateForControl 函数时，我想隐藏这些占位符。

 var SetErrorStateForControl = function (elemObj, msg)
{
    $('<span class="reqDiv" name="Required">' + msg + '</span>').prependTo(elemObj.closest('div'));
    //hide placeholders of all textboxes
}

在焦点上我想把占位符放回去。

 $("#Offer_Form").find(".form-control").on("focus", function (e) {
        //Show placeholders back
    });

甚至可以使用 jquery 或 css 隐藏和显示占位符吗？

原文由 Multi stack 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译jquerycssplaceholder
阅读 974
2 个回答
得票最新
社区维基
1
✓ 已被采纳

检查这个。

它可能会帮助你理解。

 <!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Place Holder</title>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
        <div id=Offer_Form>
            <input class="form-control MyClass" id="txtAddress" placeholder="Address" type="text">
            <input class="form-control MyClass" id="txtZip" placeholder="Zip Code" type="text">
        </div>
    <script type="text/javascript">

        $(document).on("focus" , ".MyClass" , function () {

            $(this).removeAttr('placeholder');

        });

        $(document).on("focusout" , ".MyClass" , function () {

            if($(this).val() == ''){
                $(this).attr('placeholder' , "My PlaceHolder");
            }

        });

    </script>

    </body>
</html>

原文由 Punit Gajjar 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1
<input type="text" placeholder="enter your text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" />

原文由 Germano Plebani 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题