Develop Reference

Select element - show a label on focus

I want to show a label when select element is clicked on (change opacity and location by a few px)
Here's how I do it with a normal form input. THIS WORKS.
$(".lead_field-label.is-focus").removeClass("is-focus");
$(".lead_text-field").on("focusin", function () {
$(this).siblings(".lead_field-label").addClass("is-focus");
});
$(".lead_text-field").on("focusout", function () {
if ($(this).val() === "") {
$(this).siblings(".lead_field-label").removeClass("is-focus");
}
if ($(this).val() !== "") {
$(this).siblings(".lead_field-label").addClass("is-focus");
}
});
This is for a select input, and this doesn't work:
$(".lead_field-label-select.is-focus-select").removeClass("is-focus-select");
$("select").focus(function() {
$(this).siblings(".lead_field-label-select").addClass("is-focus-select");
});
$("select").on("focusout", function () {
if ($(this).val() === "") {
$(this).siblings(".lead_field-label-select").removeClass("is-focus-select");
}
if ($(this).val() !== "") {
$(this).siblings(".lead_field-label-select").addClass("is-focus-select");
}
});
I tried to target a class (.select), an ID, and a ton of other stuff too. Nothing seems to work. Any solutions?

Conditional statement not working on a VueJs method

I'm trying to add conditional statement, so when the user toggle the buttons it would trigger an action, for example output the some text.
I tried to add the conditional as method, and as computed property without success, also I tried with switch statement.
I'll add the codepen link https://codepen.io/manosx/pen/KELmpj?editors=0010
clickedTag: function (indexTag) {
// toggle the active class
this.$set(this.isClickedTag, indexTag, !this.isClickedTag[indexTag])
let tagsSelected = _.keys(_.pickBy(this.isClickedTag, _.identity))
let tagsSelectedSingle = tagsSelected.map(s => `'${s}'`).join(', ')
console.log(tagsSelectedSingle)
if (tagsSelectedSingle === '0') { console.log('naylon') }
else if (tagsSelectedSingle === '1') { console.log('espiga') }
else if (tagsSelectedSingle === '2') { console.log('omega') }
else if (tagsSelectedSingle === '3') { console.log('crochet') }
else if (tagsSelectedSingle === '4') { console.log('thread') }
else if (tagsSelectedSingle === '5') { console.log('bordado') }
},
I would like to add a conditional statement that would trigger different actions depending of the buttons that are on.

Its beter to use indexOf() because includes will not work on some browsers.
Try this.
if (tagsSelectedSingle.indexOf('0')>=0) { console.log('naylon') }
if (tagsSelectedSingle.indexOf('1')>=0) { console.log('espiga') }
if (tagsSelectedSingle.indexOf('2')>=0) { console.log('omega') }
if (tagsSelectedSingle.indexOf('3')>=0) { console.log('crochet') }
if (tagsSelectedSingle.indexOf('4')>=0) { console.log('thread') }
if (tagsSelectedSingle.indexOf('5')>=0) { console.log('bordado') }

JS a div is not showing after page refresh

In registration form I have a 2 radio button, when one button is selected a dropdown list appears. But after register fails, the selected radio button remains but the dropdown list is not shown anymore, I want the dropdown list to be shown after register fail. There should be a solution with local storage but I dont know exactly how to write it.
here is the code, what I should add to make it happen?
$(document).ready(function() {
$('input[type=radio][name=rdUserType]').change(function() {
if (this.value == '1') {
$('#cityClient').show();
$('#cityLawyer').hide();
}
else if (this.value == '0') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
});
});

So I found the solution finally, I tried and made it :
<script>
$(document).ready(function() {
$('input[type=radio][name=rdUserType]').change(function() {
if (this.value == '1') {
$('#cityClient').show();
$('#cityLawyer').hide();
}
else if (this.value == '0') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
localStorage.removeItem("last");
});
});
function fix(){
var check = localStorage.getItem("last");
console.log(check);
if (check === 'a') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
else{
$('#cityClient').show();
$('#cityLawyer').hide();
}
}
function save(){
// rdAttorney is a id of the selected radio
if (document.getElementById('rdAttorney').checked) {
localStorage.setItem('last', 'a');
}
else{
localStorage.setItem('last', 'b');
}
}
window.onload = fix();
</script>

How to check if a textbox is clicked on

I have a keyup function on my script and when I type into one of my text boxes it triggers my hotkey which hides the text box so it makes it impossible to type in it. Please help.
$(document).keyup(function(e){
if(e.which == 67){
if($('#main').css('opacity') == 0) {
$("#cHideChat").click();
}
}
});
I want something like this but I don't know the right word to put here.
$(document).keyup(function(e){
if(e.which == 67){
if($("#chat-input").is("clickedOn")){
return false;
}
else{
if($('#main').css('opacity') == 0) {
$("#cHideChat").click();
}
}
}
});

you can do it by checking the active element in jquery . The code should be like $(document.activeElement).attr("type") == "text" || $(document.activeElement).attr("id") == "chat-input")
Please let me know if it solves your problem

Try the following:
$(document).keyup(function(e) {
if(e.which == 67){
if (e.target.id == "chat-input") {
return false;
}
}
else {
if ($('#main').css('opacity') == 0) {
$("#cHideChat").click();
}
}
}
});

Placeholder in Internet Explorer 8 & 9

Guys I know this question has been asked here many time but still I wasn't able to find a solution to my problem. I have a textarea in my asp.net mvc application which has a placeholder in it.
<textarea placeholder="Write Query..." maxlength="1000"></textarea>
Now Internet Explorer 8 & 9 doesn't support the placeholder property so I need some workaround for it, I have search here and google and found various javascripts but unfortunately none of those worked. Although some worked (as the showed the placeholder text) but the text didn't disappear on writing in the textArea
Two of those scripts (that worked half right) are these :
$(function () {
if (!$.support.placeholder) {
var active = document.activeElement;
$('input[type="text"], textarea').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$('input[type="text"], textarea').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function () { $(this).val(''); });
});
}
});
Second :
$(function () {
if ($.browser.msie && $.browser.version <= 9) {
$("[placeholder]").focus(function () {
if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
}).blur(function () {
if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
}).blur();
$("[placeholder]").parents("form").submit(function () {
$(this).find('[placeholder]').each(function () {
if ($(this).val() == $(this).attr("placeholder")) {
$(this).val("");
}
})
});
}
});

try to this alternative
https://github.com/parndt/jquery-html5-placeholder-shim/
i think it's can manage by meta tag