How to hide the text on textbox focus using Javascript
Question
I need to hide the text after
tag.
My html fields are,
<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();
}
I need to hide the text Loading... when the text box is empty . How can I achieve this.
3 answers
solution1
1 ACCPTED 2015-03-16 07:26:29
Check this one -
<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();
}
}
Note: I guess you need to show/hide only the parent div. The loader image will automatically show/hide accordingly.
UPDATE
I tried with the below code and it worked fine for me.
<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>
Note: I tried with onkeyup for testing better.
solution2
1 2015-03-16 07:51:01
<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>
With plain JavaScript the element can be hidden or an element can be removed from the DOM.
This document I thought was good: http://www.w3schools.com/jsref/prop_style_display.asp
As well there are a few other stack overflows I saw right away describing both of those techniques. As well the code can be moved into disp_hide_image() as I think you are requesting in comment.
solution3
1 2015-03-16 08:16:25
javascript code
$(document).ready(function(e) {
$("#tst").on("keyup",function ()
{
if ($(this).val() == "")
{
$("#layered_ajax_loader").hide();
}
else
{
$("#layered_ajax_loader").show();
}
})
});
and you must delete this
onfocus="disp_hide_image()"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.