javascript - Prevent form field from automatically drawing cursor/focus
Get the solution ↓↓↓
I have used a script to move the WooCommerce checkout coupon from its default position at the top of the form to nestled within the form. There were one or two things I had to tweak in the script to make it work because originally the script had the coupon in a dropdown which I don't really like. The coupon is now pretty much how I want it and where I want it, but now I've got a strange situation where as soon as the checkout page loads, the browser cursor immediately jumps into the coupon form, like the following...
The above is immediately after loading. Page focus is also immediately drawn down to that field.
I cannot figure out where or why this form field is drawing focus in this way. I've tinkered with various aspects of the script, but can't stop this strange behavior. Would appreciate any thoughts on the following:
/**
* Need the jQuery UI library for dialogs.
**/
function ttp_scripts() {
wp_enqueue_script('jquery-ui-dialog');
}
add_action('wp_enqueue_scripts', 'ttp_scripts');
function ttp_wc_show_coupon_js() {
wc_enqueue_js('$("a.showcoupon").parent().hide();');
/* Use jQuery UI's dialog feature to load the coupon html code
* into the anchor div. The width controls the width of the
* modal dialog window. Check here for all the dialog options:
* http://api.jqueryui.com/dialog/ */
wc_enqueue_js('dialog = $("form.checkout_coupon").dialog({
autoOpen: true,
width: 0,
minHeight: 0,
modal: false,
appendTo: "#coupon-anchor",
position: { my: "left", at: "left", of: "#coupon-anchor"},
draggable: false,
resizable: false,
dialogClass: "coupon-special",
closeText: "Close",
buttons: {}});');
wc_enqueue_js('$("#show-coupon-form").click( function() {
if (dialog.dialog("isOpen")) {
$(".checkout_coupon").show();
dialog.dialog( "close" );
} else {
$(".checkout_coupon").show();
dialog.dialog( "open" );
}
return false;});');
}
add_action('woocommerce_before_checkout_form', 'ttp_wc_show_coupon_js', 10);
/**
* Show a coupon link above the order details section.
* This is the 'coupon-anchor' div which the modal dialog
* window will attach to.
**/
function ttp_wc_show_coupon() {
global $woocommerce;
if ($woocommerce->cart->needs_payment()) {
echo '<p class="have-a-coupon" style="padding-bottom: 5px;"> Have a coupon? <a href="#" id="show-coupon-form">Click here to enter your code</a>.</p><div id="coupon-anchor"></div>';
}
}
add_action('woocommerce_review_order_before_payment', 'ttp_wc_show_coupon', 10);
Answer
Solution:
Okay. I found this
<input type="hidden" autofocus="autofocus" />
It does the trick by taking focus off the modal.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: php_network_getaddresses: getaddrinfo failed: temporary failure in name resolution
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.