2015-03-16 2 views
1

Мне нужно скрыть текст после тега
.Как скрыть текст в фокусе текстового поля, используя Javascript

Мои 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(); 
} 

Мне нужно, чтобы скрыть текст Загрузка ... когда текстовое поле пустым. Как я могу это достичь.

ответ

2

Проверить этот один -

<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. Изображение загрузчика будет автоматически отображаться/скрываться соответствующим образом.

UPDATE

Я попытался с ниже код и он работал отлично для меня.

<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 для тестирования лучше.

+0

жаль Это не работает для меня. –

+0

с какими проблемами вы сталкиваетесь. – prava

+0

div не скрывается в фокусе текстового поля. –

1
   <body onload="onLoad()" > 
      <div id="layered_ajax_loader" style="display: none;"> 
         <p> 

          <br />Loading... 
         </p> 
        </div> 



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

      <script> 
       var me=""; 

       function onLoad() 
       { 
        console.log("a"); 
        me=document.getElementById('hids').value 
        console.log(me); 
        if(me=="") 
        { 
         var body = document.body; 
         document.getElementById('tst').style.display = "none"; 
         //body.removeChild(document.getElementById('myid')); 
        } 
       } 

       function disp_hide_image() 
       { 

       } 
      </script> 

С помощью простого JavaScript элемент может быть скрыт или элемент может быть удален из DOM.

Этот документ я думал, было хорошо: http://www.w3schools.com/jsref/prop_style_display.asp

Как есть несколько других переполнения стека, я сразу увидел, описывающие оба этих методов. Также код можно переместить в disp_hide_image(), как я думаю, вы запрашиваете в комментарии.

1

Javascript код

$(document).ready(function(e) { 
$("#tst").on("keyup",function() 
{ 
    if ($(this).val() == "") 
    { 
     $("#layered_ajax_loader").hide(); 
    } 
    else 
    { 
     $("#layered_ajax_loader").show(); 
    } 
}) 
}); 

и вы должны удалить этот

OnFocus = "disp_hide_image()"

Смежные вопросы