Div opacity=0 only when I type something in text-field

Question

Div opacity=0 only when I type something in text-field

225 views Asked by Camilla B. At 24 November 2024 at 11:53

I have a text field and an explaining div. Can I make this explaining div have opacity = 0 ONLY when I type something in the text field? Thanks in advance for any help. Here is the HTML code:

<input type='text' name='input' id="searchdevice" class="search-field"  placeholder="" autofocus/>

<div id="explain">
            Search your device in the text field
            </div>

Original Q&A

There are 6 answers

Sajal On 20 June 2015 at 13:29

You can try:

$('#searchdevice').on('input', function(){
    $('#explain').css('opacity', 0);
});

stephenspann On 20 June 2015 at 13:31

This will require JavaScript to listen to text input and hide the DIV.

Example using jQuery:

$('#searchdevice').on('input', function(){
    $('#explain').addClass('hidden');
});

css:

.hidden {
    opacity: 0;
}

Working fiddle: http://jsfiddle.net/spanndemic/kphgg2d0/

Toni Leigh On 20 June 2015 at 13:35

Yes, javascript is good here though, functionality is kept where it belongs, responding to events in css is questionable practice. You'll want the keypress event for typing. The functions defined separately makes them easier to re-use.

var hideExplain = function() {
    document.getElementById('explain').style.opacity='0';
}

document.getElementById('searchdevice').addEventListener("keypress", hideExplain);

see keypress example here

You might be better doing this though, as focus and blur will allow you to undo the effect when the user moves on. There's a show function included here too.

var showExplain = function() {
    document.getElementById('explain').style.opacity='1';
}

document.getElementById('searchdevice').addEventListener("focus", hideExplain);
document.getElementById('searchdevice').addEventListener("blur", showExplain);

see the example here

You could use keypress to remove the tip and blur to reshow it, that way the tip would hang around for as long as possible for the user. See anothe example

Also, you would find it better to add and remove classes - here's an example with JQuery. Now your style classes are re-usable too.

CSS

.is-transparent {
    opacity: 0;
}

.is-opaque {
    opacity: 1;
}

JQuery

$('#explain').removeClass('is-opaque').addClass('is-transparent');

yuk On 20 June 2015 at 13:37

You only need this css line:

input:focus + #explain{opacity:0}

http://jsfiddle.net/kLLkyvyh/

Pralhad Narsinh Sonar On 20 June 2015 at 13:54

You can use this code:

<html>
<head>
    <title>Some title</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type='text/javascript'>
        $(document).ready(function(){
            $('#searchdevice').blur(function(){
                $('#explain').fadeTo(1000, 0);
            });
        });
    </script>
</head>
<body>
<input type='text' name='input' id="searchdevice" class="search-field" placeholder="" autofocus/>
<div id="explain">Search your device in the text field</div>
</body>
</html>

Here you can try various effects through fadeto from the link - http://api.jquery.com/fadeTo/

**Matias Kinnunen** · Accepted Answer · 2015-06-20 13:37:30

You can do it with just CSS if you set the input as required:

<input type='text' name='input' id='searchdevice' class='search-field' required='required' autofocus />

<div id='explain'>
    Search your device in the text field
</div>

CSS:

/* Show by default */
#explain {
    opacity: 1;
}

/* Hide it when input field has content */
#searchdevice:valid + #explain {
    opacity: 0;
}

/* Remove "invalid" styling when input field is empty.
E.g. in Firefox, the input has a red box-shadow by default. */
#searchdevice:invalid {
    box-shadow: none;
}

When you type something in the input field, it's "valid" and the #explain will have opacity of 0.

Browser support for the :valid selector: http://caniuse.com/#feat=form-validation

Demo: https://jsfiddle.net/2ozh40vp/1/

TechQA.

Div opacity=0 only when I type something in text-field

There are 6 answers

Related Questions in HTML

Related Questions in OPACITY

Popular Questions

Popular Tags

Trending Questions