Once I click on a button on the main page a modal opens up with a list of items for the user to select from. The content within my modal is not getting focus when the modal is opened instead when I press tab - I see it tabbing through the rest of the items on the homepage (background) before actually getting into the modal.
How can I get my modal content to get focus once open rather than having to tab through the main page before reaching the modal?
Here is my code for the modal:
<div role="dialog" aria-modal="true" class="modal">
<div class="modal-dialog override">
<div class="modal-content">
<div class="section">
<header class="section-header">
<button tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
</header>
<div class="section-body">
<ng-content select=".modal-body"></ng-content>
</div>
</div>
</div>
</div>
</div>
This is my method for opening the modal:
public open() {
this.modal.open();
this.myService.getUsers()
.subscribe((data: ClassRoster[]) => {
this.classData = data;
});
}
You can use the autofocus attribute
The autofocus attribute is a boolean attribute.
When present, it specifies that an element should automatically get focus when the page loads.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Without JavaScript
Give your button the autofocus attribute:
<div role="dialog" aria-modal="true" class="modal">
<div class="modal-dialog override">
<div class="modal-content">
<div class="section">
<header class="section-header">
<button autofocus tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
</header>
<div class="section-body">
<ng-content select=".modal-body"></ng-content>
</div>
</div>
</div>
</div>
</div>
The reason that you have to do it to the button and cannot apply it straight to the div because autofocus only works on input, textarea, select and button. It's not ideal, but it works.
With JavaScript
Make your modal opening function like this:
public open() {
this.modal.open();
document.querySelector('.modal').focus();
this.myService.getUsers()
.subscribe((data: ClassRoster[]) => {
this.classData = data;
});
}
Related
<!DOCTYPE html>
<html>
<head>
<title>Library Project</title>
<link rel="stylesheet" href="styles.css">
<script src="practice.js" defer></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Library</h1>
</div>
<div class="bottomContainer">
<div class="button">
<button id="newBook" onclick="displayCard();">New Book</button>
</div>
<div class="cardsContainer">
<div class="window">
<form action="">
<div class="close-btn">
<p>Add A New Book</p>
<button class="x">×</button>
</div>
<input type="text" placeholder="Title" id="title" value="">
<input type="text" placeholder="Author" id="author" value="">
<input type="text" placeholder="Pages" id="pages" value="">
<button class="submit" onclick="createDiv();">Submit</button>
</form>
</div>
</div>
<div class="cards"></div>
</div>
</div>
// Button Stuff //
let newBook = document.getElementById("newBook");
let cardsContainer = document.querySelector(".cardsContainer");
let x = document.querySelector(".x");
// Brings up & closes form window //
function displayCard() {
cardsContainer.style.display = "flex";
}
// Creates Div //
function createDiv() {
alert("working");
let cards = document.querySelector(".cards");
let strong = document.createElement("strong");
strong.textContent = "strong";
cards.append(strong);
};
I have two buttons. The first button brings up a modal that has a "Submit" button on it. When I press "Submit" I want to add the word "Strong" to the div ".cards". The button alerts "working" and then strong appears on the screen but when I click off the alert, the word "strong" disappears. I tried changing the code around so that when I press the "New Book" button the word strong appears and stays, however, if I try to also have the modal come up after, the word "strong" disappears again. I have no idea what I'm doing wrong and I just need to be able to append stuff after hitting the "Submit" button.
I'm using <iframe name="votar" style="display:none;"></iframe>
To submit the form without without redirecting the tab, but the "Type something..." field is not
is not displayed again when submitted.
The submit button is <button class="login100-form-btn"> submit </button>
And I already tried with <button class="login100-form-btn" type="reset"> submit </button>
What clears the field but does not submit the form
I also got the idea to put a link when pressed to send.
The page reloads the field comes back empty but the form is not submitted, doing so
<button class="login100-form-btn">submit</button>
Also tried using <meta http-equiv="refresh" content="5; url=http://www.pseudo.link">
what made the page at a given second refresh all the time
<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<iframe name="votar" style="display:none;"></iframe>
<form action="https://docs.google.com/forms/d/e/.../formResponse" target="votar">
<span class="login100-form-title p-b-49">Make a comment.</span>
<div class="wrap-input100 validate-input m-b-23" data-validate="Username is reauired">
<input class="input100" type="text" name="entry.???" placeholder="Type something...">
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
Just added to the <form> a onsubmit='this.submit();this.reset();return false;'
<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<iframe name="votar" style="display:none;"></iframe>
<form action="https://docs.google.com/forms/d/e/.../formResponse" target="votar" onsubmit='this.submit();this.reset();return false;'>
<span class="login100-form-title p-b-49">Make a comment.</span>
<div class="wrap-input100 validate-input m-b-23" data-validate="Username is reauired">
<input class="input100" type="text" name="entry.???" placeholder="Type something...">
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
You need to add a script.js file or javascript code into your file where you have to write code to submit the form.
And there write submit function with .reset() property and don't prevent the default form action in that code
I have a blog page where user can post comments, comment form shows up as a bootstrap modal when user click on a link or button.
This website is designed in asp.net webform just in case information is helpful
Since i cant put all the code i have just put related code of the page with css & JS.
This form works fine on Desktop browser and also on samsung browser but same breaks on iphone.
Form has multiple fields for input Name, Email, Country, Comments etc
When i start to enter Name cursor show below the Name inputbox and when i enter email cursor show almost two row below the email input feild..
I am adding screen for reference and also Codepen link
1[]2
I am not sure why it is breaking as i am not able to debut it in Iphone
<div class="modal fade in" id="commentModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block;" aria-hidden="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Comment</h4>
</div>
<div class="modal-body">
<!--- UpdatePanel -->
<div id="MainContent_UpdatePanel1">
<!--- Code -HERE -->
<div id="MainContent_pnlForm">
<div class="comment-intro-w">
<span id="MainContent_lblCommentMsg" class="txtLabelComment">All fields are mandatory.</span>
</div>
<div data-val-validationgroup="vgCommentForm" id="MainContent_vsCommentForm" class="validation-sum" data-valsummary="true" style="display:none;">
</div>
<div class="comment-fullname-w">
<input name="ctl00$MainContent$txtCommentFullName" id="MainContent_txtCommentFullName" tabindex="1" class="txt-comment-fn" placeholder="Full Name" type="text">
<span data-val-controltovalidate="MainContent_txtCommentFullName" data-val-errormessage="Name can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfv1" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Name can't be blank</span>
</div>
<div class="comment-email-w">
<input name="ctl00$MainContent$txtCommentEmail" id="MainContent_txtCommentEmail" tabindex="1" class="txt-comment-fn" placeholder="Email" type="text">
<span data-val-controltovalidate="MainContent_txtCommentEmail" data-val-errormessage="Email can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfvEmail" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Email can't be blank</span>
<span data-val-controltovalidate="MainContent_txtCommentEmail" data-val-errormessage="Enter correct email" data-val-validationgroup="vgCommentForm" id="MainContent_revEmail" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid"
data-val-validationexpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" style="visibility:hidden;">Enter correct email</span>
</div>
<div class="comment-country-w">
<select name="ctl00$MainContent$ddCountry" id="MainContent_ddCountry" tabindex="3" class="dd-comment-country">
<option value="">Country</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
</select>
<span data-val-controltovalidate="MainContent_ddCountry" data-val-errormessage="Select Country" data-val-validationgroup="vgCommentForm" id="MainContent_rfvddC" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Select Country</span>
</div>
<div class="comment-message-w">
<textarea name="ctl00$MainContent$txtCommentMessage" rows="5" cols="20" id="MainContent_txtCommentMessage" tabindex="4" class="txt-comment-msg" placeholder="Message"></textarea>
<span data-val-controltovalidate="MainContent_txtCommentMessage" data-val-errormessage="Message can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfvmsg" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
data-val-initialvalue="" style="visibility:hidden;">Message can't be blank</span>
</div>
<div class="comment-anonymous-w">
<span class="chk-anonymous"><input id="MainContent_cbAnonymous" name="ctl00$MainContent$cbAnonymous" type="checkbox"><label for="MainContent_cbAnonymous">I wish to be anonymous. Do not publish my name with my comment.</label></span>
</div>
<div class="comment-btnsave-w">
<input name="ctl00$MainContent$btnSaveComments" value="Post Comment" onclick="ClientSideClick(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$btnSaveComments", "", true, "vgCommentForm", "", false, true))"
id="MainContent_btnSaveComments" class="buttonPopups" type="button">
</div>
</div>
<!--- Code -HERE -->
</div>
<!--- UpdatePanel -->
</div>
</div>
</div>
</div>
I found the solution it seems to work .modal-open { position: fixed; width: 100%; }
It seems like a bug in iOS. Any other solution is welcome
Personally, position: fixed scroll to top automatically. Quite annoying !
To avoid penalizing other devices and versions I apply this fix only to the appropriate versions of iOS.
For the javascript/jQuery
$(document).ready(function() {
// Detect ios 11_0_x affected
// NEED TO BE UPDATED if new versions are affected
var ua = navigator.userAgent,
iOS = /iPad|iPhone|iPod/.test(ua),
iOS11 = /OS 11_0_1|OS 11_0_2|OS 11_0_3|OS 11_1/.test(ua);
// ios 11 bug caret position
if ( iOS && iOS11 ) {
// Add CSS class to body
$("body").addClass("iosBugFixCaret");
}
}
For the CSS
/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }
Reference Source iOS 11 Safari bootstrap modal text area outside of cursor
I am trying out the Ionic app. I have the following simple snippet:
<ion-content padding="true" >
<label class="item item-input item-stacked-label">
<button ng-click="clickMe()">ClickMe</button>
</br>
<div class="input-label">Test Label</div>
</label>
</ion-content>
Which gives the following UI:
When I am clicking outside of the ClickMe button, ClickMe button is pushed up and called the clickMe().
Please help me to understand the reason behind this.
That is the property of a label that:
When a LABEL element receives focus, it passes the focus on to its
associated control.
If you want to prevent it, you can write a directive:
myApp.directive('preventClick', function() {
return {
link : function(scope, element, attrs) {
elemenet.on('click', function(e) {
e.preventDefault();
});
}
}
});
And apply it to the label
<label class="item item-input item-stacked-label" prevent-click>
<button ng-click="clickMe()">ClickMe</button>
</br>
<div class="input-label">Test Label</div>
</label>
Don't use label for that. Use any other element.
<div class="item item-input item-stacked-label">
<button ng-click="clickMe()">ClickMe</button>
</br>
<div class="input-label">Test Label</div>
</div>
I am developing a web application built off of Bootstrap 3.2.0. Everything is working just fine except that all my input arrays are not able to be edited within Firefox 33.1 (Safari 8.0 and Chrome 38.0.2125.122 work fine).
My settings page is looks like this:
<!-- Tab panes -->
<form method="post" class="form-horizontal" role="form">
...
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="social">
<button type="button" class="social-add btn btn-success"><span class="glyphicon glyphicon-plus"></span> Add Social Icon</button>
<br/><br/>
<!-- Social Icons -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Social Icons</h3>
</div>
<div class="social-div panel-body">
// Loop ...
<div class="social-divs form-group">
<label class="col-sm-1"><span class="glyphicon glyphicon-move pull-right"></span></label>
<div class="col-sm-11">
<div class="col-sm-3">
<select name="social-type[]" class="form-control">
// Loop ...
<option value="...">...</option>
// End Loop ...
</select>
</div>
<div class="col-sm-6">
<input name="social-link[]" class="form-control" type="text" value="...">
</div>
<div class="col-sm-3">
<button type="button" class="social-remove btn btn-danger"><span class="glyphicon glyphicon-minus"></span> Remove</button>
</div>
</div>
</div>
// End Loop ...
</div>
</div>
</div>
...
</form>
As you can see I am using the HTML input array method to get all social icons since the user dynamically creates them and can reorder them. This all works perfect in Safari and Chrome as mentioned before, but the select box and textfield are not able to be edited in Firefox.
The weird thing is that if I just had:
<input name="social-link[]" class="form-control" type="text" value="...">
outside of a Bootstrap panel and tab system then the textfield is editable. So there must be some compatibility issues with Firefox and Bootstrap Panels or Tabs.
Thanks for your help in advance :)
I was able to determine that it was the way I was calling jQuery sortable on a div container. Firefox does not like when you call disableSelection() on all sortable elements like this:
$("#sort").sortable().disableSelection();
So instead just use:
$("#sort").sortable();
A much better thread can be found here.