Universal Clearable textbox on html? - javascript

I want to have clearable textbox on my web application. I got this working code.
CSS
.clearable {
background: url(../Images/close.png) no-repeat right -10px center;
transition: background 0.4s;
}
.clearable.x {
background-position: right 10px center;
}
.clearable.onX {
cursor: pointer;
}
jQuery
$(document).ready(function () {
jQuery(function ($) {
function tog(v) { return v ? 'addClass' : 'removeClass'; }
$(document).on('input', '.clearable', function () {
$(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function (e) {
$(this)[tog(this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left)]('onX');
}).on('click', '.onX', function () {
$(this).removeClass('x onX').val('').change();
});
});
});
HTML
<input class="clearable" type="text" />
Here's a sample JSFIDDLE http://jsfiddle.net/h7fybLxn/3/
Is it possible for make it for all textboxes I have on my application?
Like having input[type=text].

http://jsfiddle.net/h7fybLxn/4/
is this what you're after ?
Ive updated your fiddle so you clear all textboxes with the same class rather than selecting 'this'.
Instead of this :
$(this).removeClass('x onX').val('').change(); //btw keep this in if you just want to clear each textbox individually
I put this :
$('.clearable').removeClass('x onX').val('').change();
Also a change in your HTML so they have the same class :
<input class="clearable" type="text" />
<br />
<br />
<input class='clearable' type="text" /> <!-- I want on this textbox too -->

Related

How to apply focusout or blur event on a section as a whole?

we have implemented a functionality that after clicking on a button, a section appears having input and search button and when the complete section blurs when navigated using tab key, then the original button comes back. We have added onfocusout event to capture child element blur event, but it is getting triggering separately for each element i.e. when user clicks on input, then press tab key, instead of going to button, it hides the section. We want when the complete div goes out of focus then it gets hidden. Is there a way to achieve this? Also, as the code needs to be written in Angular, so won't we able to use jQuery if there might be some solution using it.
function showButton() {
var x = document.getElementById("searchWithButton");
x.classList.add("display-none");
var y = document.getElementById("search");
y.classList.remove("display-none");
}
function showSearchDiv() {
var x = document.getElementById("searchWithButton");
x.classList.remove("display-none");
var y = document.getElementById("search");
y.classList.add("display-none");
var z = document.getElementById("searchInput");
z.focus();
}
.red-border {
border: 2px solid red;
padding: 5px;
}
.display-none {
display: none;
}
<div id="searchWithButton" onfocusout="showButton()" class="red-border display-none">
<input id="searchInput" type="text">
<button>Search</button>
</div>
<button id="search" onclick="showSearchDiv()">Search</button>
What is the desired behavior to hide the searchWithButton? May I suggest any of the following: a click outside, pressing [escape]. Or focusing another element using [tab] (a little patchy)
var x = document.getElementById("searchWithButton");
var y = document.getElementById("search");
var z = document.getElementById("searchInput");
function showButton() {
x.classList.add("display-none");
y.classList.remove("display-none");
}
function showSearchDiv() {
x.classList.remove("display-none");
y.classList.add("display-none");
z.focus();
}
window.addEventListener('keydown', function(ev) {
if (ev.keyCode==27) {
showButton();
}
})
window.addEventListener('mousedown', function(ev) {
if (!ev.target.closest("#searchWithButton")) {
showButton()
}
})
document.querySelectorAll(".get-focus").forEach(function(item) {
item.addEventListener('focus', showButton)
})
.red-border {
border: 2px solid red;
padding: 5px;
}
.display-none {
display: none;
}
before: <input type="text" name="before" class="get-focus">
<br><br>
<div id="searchWithButton" class="red-border display-none">
<input id="searchInput" type="text">
<button>Search</button>
</div>
<button id="search" onclick="showSearchDiv()">Search</button>
<br><br> after: <input type="text" name="after" class="get-focus">

Why does my jQuery toggle workaround not work?

Since I couldn't make it work with the jQuery toggle function I try to build a workaround which doesn't work as well. If I just go for removeClass onClick, it removes the class. But both the toggle and if..else logic won't work.
Where's my bug?
$('.category-wrapper').click(function() {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
click me to change color</label></div>
Your code looks Excellent !! you just need to prevent the bubble effect which causes trigger the handler 2 times , you can see more here bubble events
e.preventDefault()
$('.category-wrapper').click(function(e) {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
e.preventDefault(); // <-- this line your solution
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
click me to change color</label></div>
you can easily toggle a checkbox but you can't toggle a radio cause it checked just once. if you are planning to use multiple radios instead then you can use the following link: JSFiddle click to test the example.
// Multiple Radio Color Change Example:
JSFiddle
// Radio Example:
$(document).ready(function() {
$('#radio-example input:radio').change(function() {
$("label").toggleClass("category-deselected");
});
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio-example" class="category-wrapper">
<div class="row">
<label for="id_poller_category_17">click me to change color</label>
<input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17"> </div>
</div>
//Checkbox Example:
$(document).ready(function() {
$('#radio-example input:checkbox').change(function() {
$("label").toggleClass("category-deselected");
});
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio-example" class="category-wrapper">
<div class="row">
<label for="id_poller_category_17">click me to change color</label>
<input type="checkbox" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17"> </div>
</div>
The issue is that you have both a <label> and an <input> in your div, and the they both send a click event, which results in your function executing twice, nearly simultaneously. You can get around this by ignoring the click on the label:
$('.category-wrapper').click(function() {
if (event.target.nodeName !== "LABEL") {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
}
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
click me to change color</label></div>
$('.category-wrapper').click(function() {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
});
Think about your logic ... if hasClass ( remove class) ... else ( addClass )
Your script first check if $(this) hasClass and then remove it ... and then make "else" and addClass

Jquery: How to dynamically bind a textbox with onload event?

A textbox is created on runtime in Javascript. It gets open when user clicks a button.
<input type="text" id="documentTitle" name="documentTitle" value="<spring:message code="document.Title"/>"
On click I want to display textbox text highlighted.
How to fire onload element using JQuery?
Tried following JQuery, but not successful:
$(document).on("load", "#documentTitle" , function() {
myquery.highlightText(this);
});
i don't what you exactly want but here some code that may help you ?
$(document).ready(function() {
alert("on load event fire");
$("button").click(function() {
$("textarea").show();
})
});
textarea {
display: block;
width: 400px;
color: black;
padding: 10px;
text-shadow: 0px 0px 2px rgba(255, 0, 0, 1);
height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea style="display:none">asdasdasd</textarea>
<button>
show
</button>
You dont have the choice there is no event fired when an arbitrary DOM element such as a <div> becomes ready.
$(document).ready(function(e) {
$(document).on("click", "#test", function() {
$("#content").append('<input type="text" id="documentTitle" name="documentTitle" value=""/>');
//do your highlight here
$("#content #documentTitle").val("test");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="test" value="test" />
<div id="content"></div>
If you really want an event you should create a custom one
$(document).ready(function(e) {
$(document).on("click", "#test", function() {
$("#content").append('<input type="text" id="documentTitle" name="documentTitle" value=""/>');
$("#content #documentTitle").trigger("myLoadedevent");
});
$(document).on("myLoadedevent", "#documentTitle", function() {
//do your highlight here
alert('event');
});
});

Add toggleClass to a Checkbox with jQuery

How can I apply toggleClass() to an input="checkbox" when it has been checked? I'm trying to add the class "calcButtonOn" when checked:
jQuery(function() {
var total = 0;
jQuery("input").click(function() {
total = 0;
jQuery("input:checked").not('input[value="reset"]').each(function() {
total += parseFloat(jQuery(this).val());
});
jQuery("#Totalcost").html("Save up to " + total + "%");
});
});
Select all the checkboxes with JQuery and add an event handler on change event:
jQuery("input[type=checkbox]").change(function(){
jQuery(this).toggleClass("calcButtonOn", this.checked);
});
Example JSFiddle
I'd suggest, on the assumption that you want to have the class present when the element is checked, and removed when the element is subsequently unchecked:
jQuery('input[type=checkbox]').on('change', function () {
$(this).toggleClass('active', this.checked);
});
jQuery('input[type=checkbox]').on('change', function () {
$(this).toggleClass('active', this.checked);
});
input {
display: block;
padding: 0.5em;
margin: 0 0 1em 0;
box-shadow: none;
}
input.active {
box-shadow: 0 0 1em 0.25em #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
Should any of your check-boxes be checked on page-load (via the checked attribute, for example) then it's worth further chaining the change() method (without a function callback) in order to fire the event:
jQuery('input[type=checkbox]').on('change', function () {
$(this).toggleClass('active', this.checked);
}).change();
jQuery('input[type=checkbox]').on('change', function () {
$(this).toggleClass('active', this.checked);
}).change();
input {
display: block;
padding: 0.5em;
margin: 0 0 1em 0;
box-shadow: none;
}
input.active {
box-shadow: 0 0 1em 0.25em #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked />
<input type="checkbox" />
<input type="checkbox" checked />
<input type="checkbox" />
References:
Attribute-equals ([attribute=value]) selector.
change().
on().
toggleClass();
Use :
$(".Your_Checkbox_Class")each(function(){
if ($(this).is(':checked') ){
$(this).toggleClass("Your_New_Class");
}
});
Explanation : Loop thru all Checkboxes (hope you have given them Class as i gave above ).And then check if its checked , if yes toggle the class.
Edit
Well your question is not 100% clear. But if you want event on click of only one checkbox and toggle only that checkbox , then use
$(".Your_Checkbox_Class").click(function(){
var id = $(this).attr("id");
$("#"+id).toggleClass("Your_New_Class");
})
Explanation : If checkbox gets checked , then toggle class. I assume you have proper classes on DOM load . Like if after Loading DOM , if a checkbox is already ticked (Came from server side), it will already have class for checked_element already.

How to smooth this search bar animation

I tried to modify the code taken from herefor my usage need:
CSS:
.search-bar{ width: 200px; display: none; }
.searchbox { display: inline;}
.trigger { display: inline}
HTML:
<div class="search-bar">
<input type="text" name="s" class="searchbox" value="Search" onfocus="this.value=''">
</div>
<button class="trigger">search</button>
JS:
$(document).ready(function() {
$('.trigger').click(function() {
if ($("search-bar").is(':visible')) {
$('.search-bar').animate({width: 'toggle'}).css({ 'display' : 'inline'});
} else {
$('.search-bar').animate({ width: 'toggle' }).css({ 'display' : 'inline'});
}
});
});
It works as expected but the animation isn't smooth. How to make the animation flow smoothly.
JSFiddle
Thank you,
try something like this, FIDDLE
$(document).ready(function () {
$('.trigger').click(function () {
if ($(".search-bar").is(':visible')) {
$('.search-bar').fadeOut();
} else {
$('.search-bar').fadeIn();
}
});
});
simplified version
$(document).ready(function () {
$('.trigger').click(function () {
$('.search-bar').fadeToggle("slow");
});
});
set animation time also see updated fiddle
$(document).ready(function() {
$('.trigger').click(function() {
if ($("search-bar").is(':visible')) {
$('.search-bar').animate({width: 'toggle'},500);//here set animation duration
} else {
$('.search-bar').animate({ width: 'toggle' },500);//here set animation duration
}
});
});
reference animation()
You just need to add the width to each expandable div.
To explain:
jQuery doesn't know the dimensions of your hidden div until it's displayed. So when it's clicked on it actually pulls it out of position to measure it before quickly replacing it. This often has the side effect of causing some jumpiness. Setting the width on the element prevents jQuery from pulling it out of position.
More detailed information please see this link:
jQuery slideDown is not smooth
Someone has helped me out. The feature I want is here: http://jsfiddle.net/mw7yK/12/
CSS:
.search-bar { display: inline; }
.searchbox { width: 200px; display: none; }
.trigger { display: inline}
HTML:
<div class="search-bar">
<input type="text" name="s" class="searchbox" value="Search" onfocus="this.value=''" />
</div>
<button class="trigger">search</button>
JS:
$(document).ready(function() {
$('.trigger').click(function() {
$('.searchbox').animate({width: 'toggle'}, 1000);
});
});

Categories

Resources