I'm trying understand how element focus works.
My questions is:-
Does Javascript focus have some limitations? I mean does it have same permissions when it runs from website code and from debug console?
also does focus depends on user action? Because I have code example which I can't understand why it runs like this:-
$('document').ready(function() {
$('#username').focus();
$("#username").focus(function() {
$('.placeholder').hide();
});
$('#ss').click(function() {
$('#username').focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="placeholder_input">
<input type="text" id="username" maxlength="100" />
<div class="placeholder_container">
<div class="placeholder">username</div>
<div id='ss'> damc</div>
</div>
</div>
Example On JSFiddle
When code starts run it must focus input field and hide text but it not doing this can't understand why? But when I'm making click on text then it makes focus on input field and hides text. Why it can't hide in beginning? Is it some kind of limitation?
You are focusing the element before you bind the event listener. Change the order and it works as planned:
$('document').ready(function() {
$("#username").focus(function() {
$('.placeholder').hide();
});
$('#ss').click(function() {
$('#username').focus();
});
$('#username').focus(); // focus here after your events are bound
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="placeholder_input">
<input type="text" id="username" maxlength="100" />
<div class="placeholder_container">
<div class="placeholder">username</div>
<div id='ss'> damc</div>
</div>
</div>
Related
I have a static and dynamically generated search input box. When I enter a value in the search box and click the "x" to clear it, I get a trigger for the static search box, but nothing happens with the dynamically generated one when I click on the "x". Sample code below:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="search_group" style="">
<div class="input-group">
<input type="search" class="form-control" id="search_text"/>
</div>
</div>
<h5 id="add_search" style="cursor:pointer">Dynamically ad Search Box</h5>
<p id="append_here"></p>
<script type="text/javascript">
//this works on the static search box, but not on the dynamic search box
$('input[type=search]').on('search', function () {
console.log('X clicked');
});
//add search box dynamically
$( "#add_search" ).on( "click", function() {
var new_search_element = `<div id="search_group">
<div class="input-group">
<input type="search" class="form-control" id="search_text"/>
</div>
</div>`;
$("#append_here").empty().append(new_search_element);
});
</script
</body>
</html>
How can I get the dynamically generated search box to respond to a click on the "x"?
Your help is appreciated!
I think you should have to learn "Event Bubbling"
Easy to Paste this link
https://bokboot.net/read?id=62&key=fdfd681c-1807-4e93-9ca4-b0f68a6717b5
$('#search_group').on('search', function (e) {
if(e.target.id != "search_text") return;
console.log('X clicked');
$("#data").empty();
});
I am creating 'typeform like' form, that scrolls one input element at a time.
name -> email -> phone -> address -> note
(codepen here)
With the code below, I have the situation that after entering value for phone and pressing enter, address gets skipped. Flow directly reaches note.
The reason is that focusout event gets fired, immediately after target.find(".input-box").focus() on input#address.input-box.
I do not understand what is causing focusout to be fired.
Can anyone explain? (and how to stop it from happening).
The intent is to have phone element scroll after user enters the input on mobile. On iOS for example, there is no Enter key for phone entries, only 'Done'.
I use focusout since it the event fired on pressing 'Done'. But it is too broadly fired, to properly work with.
Is there a better way to achieve the expected behavior?
HTML:
<!-- ... -->
<div class="flex-container">
<form novalidate="">
<div class="input-block flex-item" id="input-block-name" style="display: inherit;">
<div class="label">name</div><input class="input-box" type="text" id="name">
</div>
<div class="input-block flex-item" id="input-block-email" style="display: none;">
<div class="label">email</div><input class="input-box" type="email" id="email">
</div>
<div class="input-block flex-item" id="input-block-phone" style="display: none;">
<div class="label">mobile</div><input class="input-box" type="tel" id="phone">
</div>
<div class="input-block flex-item" id="input-block-address" style="display: none;">
<div class="label">address</div><input class="input-box" type="text" id="address">
</div>
<div class="input-block flex-item" id="input-block-note" style="display: none;">
<div class="label">note</div><input class="input-box" type="text" id="note">
</div>
<!-- ... -->
</form>
<!-- ... -->
JS:
$(".input-box").first().focus();
$(".input-block")
.not($(document.activeElement.parentElement))
.css({ display: "none" });
$(window).on(
"keyup wheel focusout",
_.debounce((event) => {
var current = $(":visible").closest(".input-block");
// next
if (
event.key === "Enter" ||
event.originalEvent.deltaY > 0 ||
(event.type == "focusout" && event.target == $("#phone")[0])
) {
var target = $(":visible").closest(".input-block").next();
target.css({ display: "inherit" });
target.find(".input-box").focus();
current.css({ display: "none" });
}
// prev
if (event.originalEvent.deltaY < 0) {
var target = $(":visible").closest(".input-block").prev();
target.css({ display: "inherit" });
target.find(".input-box").focus();
current.css({ display: "none" });
}
}, 30)
);
EDIT: refined the question, after first response.
EDIT by OP: what 'solved' the issue, was to use blur event (see comments).
I believe your issue is with this line (in the if condition):
(event.type == "focusout" && event.target == $("#phone")[0])
With each scroll there will be a 'focusout' type from the previous input. When you scroll from phone to address, the phone input box has a type of 'focusout' and the above referenced code condition is true, hence why the result of the condition is happening twice.
Fully removing the above referenced line should resolve your issue.
I know there's bunch of link here for my problem but none of them can solve my problem. I have code like this
$('[name=pie]').on('click change touchstart tap', function() {
$('#summary_pie').html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-item">
<input type="radio" name="pie" id="pie-wheat" value="Tortilla pszenna">
<label for="pie-wheat" onclick=""><img src="img/pie-wheat.png"></label>
<p class="description">Tortilla pszenna</p>
</div>
<p>Tortilla: <span id="summary_pie"></span></p>
and it works on chrome etc. but don't work on ios. I tried:
- adding cursor: pointer
- adding empty onclick
- adding touchend event
but nothing work. In my php I have only 2 css (reset.css and my own). Deleting them don't work. Please help me.
I have just modified click event calling code and also tested the same on ios device.so it may solve your issue.try this
$(document).on('click change touchstart tap','[name=pie]', function() {
$('#summary_pie').html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-item">
<input type="radio" name="pie" id="pie-wheat" value="Tortilla pszenna">
<label for="pie-wheat" onclick=""><img src="img/pie-wheat.png"></label>
<p class="description">Tortilla pszenna</p>
</div>
<p>Tortilla: <span id="summary_pie"></span></p>
try
$(document).ready(function(){
$('[name=pie]').on('click change touchstart tap', function() {
$('#summary_pie').html($(this).val());
});
})
I seem to be able to hide the resource container using
resource.parent().parent().hide();
but I don't understand why the input value is not clearing with
resource.parent().siblings('.resource-value').children('input').val('');
when I use
resource.parent().siblings('.resource-value') I get the parent of the input value but adding .children('input').val('') on top of that does nothing or if I add .children('input:text').val('')
I have very similar code for something else which works just fine, looked at other questions and not sure what I'm missing.
function removeResource(resource) {
'use strict';
//hide resource on screen
resource.parent().parent().hide();
//set resource text value to ''
resource.parent().siblings('.resource-value').children('input').val('');
}
(function($) {
'use strict';
$(function() {
$('#resources').on('click', '.remove-resource', function(evt) {
// Stop the anchor's default behavior
evt.preventDefault();
// Remove the image, toggle the anchors
removeResource($(this));
});
});
})(jQuery);
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="resources">
<div class="resource">
<div class="resource-value">
<input type="text" name="resources[]" value="1" />
</div>
<p class="hide-if-no-js"><a title="remove resource" href="javascript:;" class="remove-resource">remove resource</a > </p>
<!-- .hide-if-no-js -->
</div>
<div class="resource">
<div class="resource-value">
<input type="text" name="resources[]" value="2"/>
</div>
<p class="hide-if-no-js"><a title="remove resourcee" href="javascript:;" class="remove-resource">remove resource</a> </p>
<!-- .hide-if-no-js -->
</div>
</div>
</body>
<html/>
Tried your code and worked fine for me in terms of the actual value of the field clearing, though in inspector the HTML element still has the value attribute showing.
You can use
.attr('value','')
to clear that too http://jsfiddle.net/bvtg93dm
You just have to change the value witch jquery to set "" (so, empty).
input.attr('value','')
Try to log your sibling element with
Try to change your removeResource function to
function removeResource(resource) {
'use strict';
//hide resource on screen
var parent = resource.parent().parent();
parent.hide();
// log your element
console.log(parent.find('.resource-value input'));
// make sure you are getting an element you need
console.log(parent.siblings('.resource-value').childer('input').get(0);
//set resource text value to ''
parent.find('.resource-value input').val('');
}
I have a simple dropdown that opens up a search field when you click it. Even though I have the text field of this search set to autofocus, it's not working for all browsers.
What method of Javascript/jQuery would I use to check if the containing UL css display is set to block, so that I can force the focus to be on the field using .focus().
HTML:
Quick Search
<ul class="dropdown-menu" role="menu">
<li id="li-quicksearch">
<form id="mainSearch" class="form-search">
<p>
<input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
<button type="submit">SUBMIT</button>
</p>
</form>
</li>
</ul>
EDIT: There is no css change event so you'll have to approach the problem in 1 of 2 ways.
check the dom element in set intervals to see if its css has changed
trigger an event when the css of the dom element is changed by user interaction/your code.
the first way will look something like this:
var element = $(".dropdown-menu");
function checkForChanges()
{
if (element.css('display') == 'block')
{
// do your .focus() stuff here
}
setTimeout(checkForChanges, 500); // does this every half second.
}
or the second way:
$('.toggle').on('click', function() {
$('.dropdown-menu').toggle();
$('.dropdown-menu').trigger('change');
});
$('.dropdown-menu').on('change', function(){
if($(this).css(.css('display') == 'block')
{
// do your .focus() stuff here
}
});
You can check the display value of the ul using pure JavaScript with this:
JS:
var display = document.getElementById('dropdown-menu')[0].style.display;
if (display === 'block') {
//do what you want.
}
Or using jQuery:
if ($('.dropdown-menu').css('display') === 'block') {
//do what you want.
}
It looks like you are using bootstrap to create the dropdown. If that is the case you can use the "shown" event. However you need to attach the event on a container element.
Html
<div class="quickSearchContainer">
Quick Search
<ul class="dropdown-menu" role="menu">
<li id="li-quicksearch">
<form id="mainSearch" class="form-search">
<p>
<input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
<button type="submit">SUBMIT</button>
</p>
</form>
</li>
</ul>
</div>
Javascript
$('#quickSearchContainer').on('show.bs.dropdown', function () {
$('#inputSearch').focus();
});
I want to thank everyone for their input, but the working solution that I found was to modify the bootstrap JS to allow for an autofocus on toggleClass of the OPEN for the dropdowns. Everyone gets kudos!