javascript - 如何使用 Javascript 隐藏文本框焦点上的文本

Question

我需要隐藏
标签后的文本。

我的 html 字段是，

 <div id="layered_ajax_loader" style="display: none;">
            <p>
                <img src="./img/loader.gif" alt="" />
                <br />Loading...
            </p>
        </div>



    <form name="chk_disp_page_cnt"  method="get"  onsubmit="return pagn_cal()">
    <input type="hidden" id="hids" value="id_category" />
            <input type="text" id="tst" onfocus="disp_hide_image()"   style="width:50px; height:23px;" />
    </form>

Javascript functions are,


function disp_hide_image()
{

   $('#layered_ajax_loader').show();
   $('layered_ajax_loader').hide();
   $('img[src=".loader.gif"]').hide();
   $("div p:contains('Loading...')").parent('div').hide();
}

我需要在文本框为空时隐藏文本 Loading...。我怎样才能做到这一点。

Answer 1

检查这个 -

<div id="layered_ajax_loader" style="display: none;">
    <p>
        <img src="./img/loader.gif" alt="" />
        <br />Loading...
    </p>
</div>

<form name="chk_disp_page_cnt"  method="get"  onsubmit="return pagn_cal()">
    <input type="hidden" id="hids" value="id_category" />
    <input type="text" id="tst" onfocus="disp_hide_image()"   style="width:50px; height:23px;" />
</form>

function disp_hide_image()
{
    if ('' === $('#tst').val()) {
        $('#layered_ajax_loader').hide();
    } else {
        $('#layered_ajax_loader').show();
    }
}

注意:我想您只需要显示/隐藏父 div。加载程序图像将相应地自动显示/隐藏。

更新

我尝试了以下代码，它对我来说效果很好。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<div id="layered_ajax_loader" style="display: none;">
    <p>
        <img src="./img/loader.gif" alt="" />
        <br />Loading...
    </p>
</div>

<form name="chk_disp_page_cnt"  method="get"  onsubmit="return pagn_cal()">
    <input type="hidden" id="hids" value="id_category" />
    <input type="text" id="tst" onkeyup="disp_hide_image()"  style="width:50px; height:23px;" />
</form>

<script>
function disp_hide_image()
{
    if ('' === $('#tst').val()) {
        $('#layered_ajax_loader').hide();
    } else {
        $('#layered_ajax_loader').show();
    }
}
</script>

注意:我尝试使用 onkeyup 进行更好的测试。