I have an input text field with placeholder and its value as shown below:
<input type="text" name="test" placeholder="testing">
and I have two buttons, one is used to hide and another one is used to show the placeholder:
<button id="btn-hide">Hide</button>
<button id="btn-show">Show</button>
I want to hide the placeholder when I click on the button hide and show the placeholder when I click on the button show.I have googled and I come to know that it is possible to do by using css, but I still can not find any solution. Can anyone help me either using jquery or css or whatever? Thank you so much for answering my question.
If you wan't jQuery solution. Save your placeholder in a global var so you can reset it.
var placeholder = $('#txtInput').attr('placeholder');
$('#btn-hide').on('click', function() {
$('#txtInput').attr('placeholder' ,'');
});
$('#btn-show').on('click', function() {
$('#txtInput').attr('placeholder' ,placeholder);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txtInput" type="text" name="test" placeholder="testing">
<button id="btn-hide">Hide</button>
<button id="btn-show">Show</button>
you can remove and add attrbiute with jquery
$('#btn-hide').on('click', function(){
$('input[name="test"]').removeAttr("placeholder")
})
$('#btn-show').on('click', function(){
$('input[name="test"]').attr("placeholder", 'text')
})
This solution is pure css. It targets all input fields and onFocus it makes the font color transparent.
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
Maybe something like this can help you?
$("#btn-hide").click(function(){
$("input[name='test']").attr("placeholder"," ");
});
$("#btn-show").click(function(){
$("input[name='test']").attr("placeholder","testing");
});
P.S: It's not tested
Jquery :
$('#btn-hide').click(function(){
$('input').removeAttr('placeholder');
})
$('#btn-show').click(function(){
$('input').attr('placeholder','testing');
})
if you are using jquery just use this code
$("#btn-hide").click(function () {
$("[name=test]").removeAttr("placeholder");
});
$("#btn-show").click(function () {
$("[name=test]").attr("placeholder","testing");
});
You need to create a jquery/javascript function to show or hide your controls.
HTML:
<input type="text" name="test" placeholder="testing"/>
<button id="btn-hide" click="hide_text()">Hide</button>
<button id="btn-show" click="show_text()">Show</button>
jQuery:
function hide_text(){
$('input[placeholder:testing]').hide();
}
function show_text(){
$('input[placeholder:testing]').show();
}
.show and .hide are jQuery function that will set the display of the indicated control.
You actually don't need separate buttons for hide and show. You could have a single button that toggles placeholder and the button text is changed accordingly. https://jsfiddle.net/x337ey8p/2/
JS (pure)
function togglePlaceholder(btn) {
var tb = document.getElementById('test1');
if (tb.placeholder != '') {
tb.placeholder = '';
btn.innerHTML = 'Show';
}
else {
tb.placeholder = 'testing';
btn.innerHTML = 'Hide';
}
}
HTML
<input id="test1" type="text" name="test" placeholder="testing">
<button id="btn-show" onclick="togglePlaceholder(this)">Hide</button>
I am sharing a pure javascript way to achieve the same.
JS(pure)
HTML
<input id="inputId" type="text" name="test" placeholder="testing">
<button id="btn-hide" onclick ='hidePlaceholder()'>Hide</button>
<button id="btn-show" onclick ='showPlaceholder()'>Show</button>
JS
var placeholderVal;
function hidePlaceholder(){
placeholderVal = document.getElementById("inputId").placeholder;
document.getElementById("inputId").placeholder = "";
}
function showPlaceholder(){
document.getElementById("inputId").placeholder = placeholderVal;
}
This is how you can show/hide placeholder of an input using javaScript only.
Thanks!
Related
So I was trying to get user input and put it as CSS Variable for the whole site but it only provides me with the default value (of the Color picker). I've looked up many forums for JS and HTML-related mistakes but no luck. It would also be of great luck if I won't have to convert these into a form because of the layout of my already set HTML.
var changeclrbtn = document.getElementById('main-colorbtn');
var maincolore = document.getElementById('main-colorbox').value
changeclrbtn.onclick = function() {maincolorset()};
function maincolorset() {
document.documentElement.style.setProperty('--main-color', maincolore );
}
:root {
--main-color: #499ae8;
}
<div>Color Theme</div>
<div>
<input type="color" id="main-colorbox" name="maincolorbox" value="#499ae8">
<input type="button" value="Change Color" id="main-colorbtn" onclick="maincolorset()">
</div>
You only need to move this line:
var maincolore = document.getElementById('main-colorbox').value
inside your function.
Now you only set the maincolore variable on the first pageload, not when you click the button.
var changeclrbtn = document.getElementById('main-colorbtn');
changeclrbtn.onclick = function() {maincolorset()};
function maincolorset() {
var maincolore = document.getElementById('main-colorbox').value;
document.documentElement.style.setProperty('--main-color', maincolore );
}
:root {
--main-color: #499ae8;
}
body {
background: var(--main-color);
}
<div>Color Theme</div>
<div>
<input type="color" id="main-colorbox" name="maincolorbox" value="#499ae8">
<input type="button" value="Change Color" id="main-colorbtn" onclick="maincolorset()">
</div>
I'm using HTML5 Constraint Validation and I'd like to show validation message after each blur.
HTML
<input id="texInput" type="text" onblur="validation()" required>
JS
var el = document.getElementById('texInput');
if (!el.checkValidity()) {
//Here show message
}
Is it possible to do something similar?
Actually I meant something like: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
It is possible.
Like this:
HTML:
<input id="texInput42" type="text" onblur="function(){validation('texInput42');}" required>
JS:
function validation(_id){
var isValid= false;
//check validity here:
var el = document.getElementById(_id);
if(el.innerHtml == '') isValid=false;
if(el.innerHtml.length > 0) isValid=true;
if (isValid) {
//Here show message
alert('debug: it's ok');
//or change css to color el in green, e.g.
}
}
You can manually trigger HTML5 form validation like so:
$('input').blur(function(e) {
e.target.checkValidity();
});
Obviously the above is with jQuery, but you can just as easily adapt for pure JS.
HTML:
<!-- anywhere in your page, at the bottom e.g.->
<div id='myabsdiv' ><span class='icon'> </span> <span class="text">Please ...</span> </div>
JS:
if (!el.checkValidity()) {
//Here show message
//show an absolute div...
$("#myabsdiv").css('top', el.offset.y+el.height());
$("#myabsdiv").css('left', el.offset.x - $("#myabsdiv").width()/2);
$("#myabsdiv").show();
}
CSS:
#myabsdiv{
height:50px;
width:180px;
position:absolute;
display:none;
background-image:url('make a PNG');
}
How can I add a "Clear field" button to multiple Bootstrap 3 input fields just using jQuery and a CSS class?
I've found solutions that can add a 'clear field' button to a field with a particular ID, but nothing so far that can do it by class. I've got a form with a lot of fields and I'd rather not have to repeat my code over again for each field.
I've tried this so far (Bootply), but I can't figure out how to get jQuery to clear just the one field and toggle the one icon, not all of them.
//JS
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(".searchclear").toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(".searchinput").val('').focus();
$(this).hide();
});
});
//HTML
<div class="btn-group">
<input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
<span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"> </span>
</div>
<div class="btn-group">
<input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
<span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>
</div>
//CSS
.searchinput {
width: 200px;
}
.searchclear {
position:absolute;
right:5px;
top:0;
bottom:0;
height:14px;
margin:auto;
font-size:14px;
cursor:pointer;
color:#ccc;
}
1) You can use $(this) to get a reference to the current targeted element
2) Use .next() to toggle the visibility for only the icon which is the next immediate sibling of input that you're currenlty key in
3) Use .prev() to clear only the input which is the immediate previous sibling of clear icon that is clicked:
Final code should look like:
$(document).ready(function () {
$(".searchinput").keyup(function () {
$(this).next().toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function () {
$(this).prev().val('').focus();
$(this).hide();
});
});
Bootply Demo
Try changing your javascript code to this:
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(this).parent().find('.searchclear').toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(this).parent().find('.searchinput').val('').focus();
$(this).hide();
});
});
Essentially what it does is add scope to the clear buttons so that it is limited to the sibling. There are other jQuery functions that might be more specific, but this should work.
http://www.bootply.com/130368
Another option would be to use .siblings() to make sure you are targeting just the siblings with the searchclear class.
$(document).ready(function(){
$(".searchinput").keyup(function(){
$(this).siblings(".searchclear").toggle(Boolean($(this).val()));
});
$(".searchclear").toggle(Boolean($(".searchinput").val()));
$(".searchclear").click(function(){
$(".searchinput").val('').focus();
$(this).hide();
});
});
http://www.bootply.com/130369
I have this HTML code:
<div class="center1">
<form>
<input type="text" class="input1" autofocus="focus" />
</form>
</div>
<br><br>
<div class="center1">
<div class="box"></div>
</div>
I have added it to this JSFiddle link: http://jsfiddle.net/PDnnK/4/
As you can see there is:
INPUT FIELD
&
BOX
I want the box to appear only when text is typed in the input. How is this done?
Start the box out with display: none. Then, you can capture the keypress event for the input:
document.getElementById('myInput').onkeypress = function () {
document.getElementById('myBox').style.display = 'block';
}
Something like this with jQuery:
$("#id-of-input").change(function() { $("#id-of-box"}.css('display', 'block'); } );
or change .change to .click
Binding to "change" is usually not super-handy, since it usually doesn't fire until you tab or click away from the element.
However, polling isn't the answer either.
original answer:
http://jsfiddle.net/xNEZH/2/
super-fantastic new answer:
http://jsfiddle.net/4MhKU/1/
$('.input1').bind('mouseup keyup change cut paste', function(){
setTimeout(function(){
var hasInput = $('.input1').val() != "";
$('.box')[hasInput ? 'show' : 'hide']();
}, 20);
});
The setTimeout is because cut and paste events fire BEFORE the text is cut or pasted.
I wanted to have some radio buttons that disabled when the mouse went over and enabled again when it went out (just for fun).
<form>
<input type="radio" name="rigged" onMouseOver="this.disabled=true" onMouseOut="this.disabled=false">
</form>
When the mouse goes on it it does what it should be when it goes back off the button wont re-enable. Also, how do I make it default to enable so that when you refresh the page it doesn't stay disabled.
Thanks in advance.
You could achieve the same effect by wrapping your radio buttons in a div tag and setting the onmouseover and onmouseout events.
<div id="container" onmouseout="this.disabled=false" onmouseover="this.disabled=true">
<input name="rigged" type="radio">
</div>
The above solution only works in IE, for a solution that works in FireFox do the following.
<script type="text/javascript">
function toggleDisabled(el) {
try {
el.disabled = el.disabled ? false : true;
}
catch(E){
}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
toggleDisabled(el.childNodes[x]);
}
}
}
</script>
*This javaScript function was borrowed from here: Enable or disable DIV tag and its inner controls using Javascript
<div id="container" onmouseover="toggleDisabled(this)" onmouseout="toggleDisabled(this)">
<input name="rigged" type="radio">
</div>
The inputs do not fire the mouseout events because they are disabled.
So you have to wrap it in a div and catch the div's events.
If you want pure javascript, use Phaedrus's example "toggleDisabled" script.
If you want jQuery and not-so-newbie friendly:
<html>
<head>
<title>Page</title>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function() {
function toggleDisabled(d) {
var disable = d;
this.disableChildren = function() { $(this).children().each(function() { this.disabled = d; }); }
}
$("form .radios").hover(new toggleDisabled(true).disableChildren, new toggleDisabled(false).disableChildren);
});
</script>
</head>
<body>
<form>
<div class="radios">
<input type="radio" name="rigged" value="1"/> Item One<br />
<input type="radio" name="rigged" value="2"/> Item Two<br />
<input type="radio" name="rigged" value="3"/> Item Three<br />
<input type="radio" name="rigged" value="4"/> Item Four
</div>
</form>
</body>
</html>
I had a similar problem with wanting an image to expose, and then go regular when the mouse left the image. I was using jQuery and ended up hooking into mouseenter and mouseout, instead of the events you are using. You might want to try those.
$('#rigged').mouseenter(function() {
$(this).disabled = true;
}).mouseout(function() {
$(this).disabled = false;
});
Something like that.
Again, that's using jQuery.
(You'll have to give the input radio button the id 'rigged')
I think when it's becoming disabled, it's not going to fire any events.
You could try a few things.
On mouseover, make an invisible div overlay the radio box. This will make it impossible to use. Then on the mouseout of this invisible div, remove the div.
You could play with mouse x and y coords, and see if they overlay your radio elements. This isn't an optimal solution though.
Markup for the first, in jQuery, would go something like this
$('#rigged').after('<div id="overlay" style="display: none;"></div>'); // make this the size of the radio button and/or associated label (if present). also, maybe with absolute and relative positioning, make sure it will overlap the radio element
$('#rigged').bind('mouseover', function() {
$('#overlay').show();
});
$('#overlay').live('mouseout', function() {
$(this).hide();
});
You'll need to adapt this to work with multiple elements.