在文本输入上使用 jquery for contenteditable 并包含特定文本显示 div

Question

如果我们在开头输入“$”，我会在输入内容可编辑标签后尝试显示隐藏的 div。 我尝试使用下面的附加代码。 请在这件事上给予我帮助

 $(document).ready(function() { $(".title span").keydown(function(){ $(".title span").change(function() { var conattr = $(this).attr('contenteditable'); if (typeof conattr !== typeof undefined && conattr !== false) { //if p tag as attribute contenteditable if ($("title span:contains('$')")){ //alert('hello') $("hidden-box").show(); } } else { } }).trigger("change"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <h1 class="title">Hello World <span contenteditable="true"> <div class="hidden-box"> <p>I am a Hidden Box</p> </div> </span> </h1> </div>

Answer 1

你忘记放了. 在$("hidden-box").show(); 现在它对title span工作相同我也将span更改为div因为跨度没有宽度并且很难点击它

 $(document).ready(function() { $(".title .showHiddenBoxDiv").keydown(function() { $(".title .showHiddenBoxDiv").change(function() { var conattr = $(this).attr('contenteditable'); if (typeof conattr !== typeof undefined && conattr !== false) { if ($(".showHiddenBoxDiv").html().indexOf("$") == 0) { $(".hidden-box").show(); } } else {} }).trigger("change"); }); });

 .hidden-box{ display: none; } .showHiddenBoxDiv{ border: 1px solid black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <h1 class="title">Hello World <div contenteditable="true" class="showHiddenBoxDiv"> <div class="hidden-box"> <p>I am a Hidden Box</p> </div> </div> </h1> </div>