代码之家  ›  专栏  ›  技术社区  ›  ryanpika

Javascript:如何修改我的代码以在主题帖子后添加消失的占位符

  •  2
  • ryanpika  · 技术社区  · 9 年前

    我用一个插件手工制作了一个可竞争div的占位符。

    如下图所示。如果用户输入一些文本,然后单击发布按钮,占位符将消失。我想知道如何在发布后找回占位符。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    
    
    <div id="topic_content_input" contenteditable="true" autocomplete="off" spellcheck="false" data-placeholder="placeholder text" ></div>
    <button id="post">Post topic</button>
    
    <style>
    #topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before {
        content: attr(data-placeholder);
        float: left;
         cursor:text;
        margin-left: 2px;
        color: rgba(134,134,134,0.6);
    }
    
    #topic_content_input{
    width:521px;
      padding: 10px;
      border: 1px solid orange;
    }
    
    #topic_content_input:focus{
      outline-style:solid;
      outline-color:orange;
      outline-width:0px;
      line-height:normal;
    }
    </style>
    
    
     <script>
     (function ($) {
        $(document).on('change keydown keypress input', '#topic_content_input[data-placeholder]', function() {
            if (this.textContent) {
                this.dataset.divPlaceholderContent = 'true';
            }
            else {
                delete(this.dataset.divPlaceholderContent);
            }
        });
        })(jQuery);
        </script>
    <script>
    $("#post").click(function(){
        $("#topic_content_input").text(""); 
        var obj=$("#topic_content_input");
    
        // $("#topic_content_input").add(obj.dataset.divPlaceholderContent);  //my attempt, not working
    })
    
    </script>
    
    2 回复  |  直到 9 年前
        1
  •  2
  •   Kevin Wang    9 年前

    在CSS中 #topic_content_input[data-placeholder]:not([data-div-placeholder-content]):before ,你可以把 #topic_content_input:empty:before ,它将在div为空时放入占位符,如下所示 jsfiddle .

        2
  •  1
  •   Denys Konoplin    9 年前
    $("#topic_content_input").add(obj.dataset.divPlaceholderContent);
    

    为什么选择“.add”?

    您应该使用:

    obj.val(obj.dataset.divPlaceholderContent)
    

    obj.attr('placeholder', obj.dataset.divPlaceholderContent)