<div class="form-group">
<!-- Password-->
<label class="control-label" for="password">Password</label> <input type="password" id="password" name="password" class="form-control">
</div>
Consider following snippet. It complies with tb3. The problem is whenever I try to type anything into this field in safari - nothing gets written inside. Blinking cursor becomes active on field input during typing but no characters/black dots appear inside the field.
ff, chrome and even ie work ok. Basically on the picture I type but cursor stays at the same place no input at all.
I turned off all my scripts and problem still persists. If I change type to text it starts to work or if I remove form-control it works. But both are required...
Safari version 5.1.7 - version for windows
Thanks,
The solution that I implemented in my case is adding this line of CSS to element
.SafariFix{
-webkit-user-select:auto;
}
here is HTML of button
<input type="text" placeholder="Search by name" class="btn btn-default SafariFix" id="friendsearchinput">
note (this will work for safari 6 but I am not sure for previous version )
I had the problem that I used
padding: 20px 13px;
which caused issues on the input element. The input text and the placeholder weren't visible in Safari, but worked in any other browser.
I fixed it by using
padding: 0 13px;
height: 45px;
which looks the same but works in Safari.
I had the same problem: You could try to change the font-family of the password input field, for example:
style="font-family:Arial"
and then it should work as expected :-)
Related
I am using Protractor, and trying to find the content of tooltips on the page. These tooltips are generated by Angular-UI, and fading in with moveMouse over them like below. Those tooltips are similar with ng-bind, but I cannot use binding to find them. Also, I tried to getAttribute of this tooltip, but it also didn't work for me, maybe cause protractor cannot detect this element name. Do you have any idea of how to read the content of those tooltips? Many thanks.
<div class="col-md-2">
<div class="form-group">
<label class="control-label" id="label_Merchant_Number" translate>merchant_NUM</label>
<input ng-model='searchCriteria.MERCHANT_NUMBER' tooltip="{{'merNumber_tooltip'|translate}}" class='form-control input-sm' type='text' id='MERCHANT_NUMBER' name='MERCHANT_NUMBER' maxlength='16' erng-validations>
</div>
</div>
we are using getAttribute('tooltip'), works how it should be ...
element(by.model('searchCriteria.MERCHANT_NUMBER')).getAttribute('tooltip');
I'm buzy with a validation plug-in. When someone clicks on the submitbutton and the required fields are not filled, the border-color of the concerning fields changes to red. My problem however is that I also want the color of the text next to it to change. This is my structure:
<div class="row">
<label for="name">Name*</label>
<input type="text" id="name" name="name">
</div>
.form.a input.error {border:2px solid #eb053b;}
How can I now select the label-element to change the text color? It's not possible with CSS, because you can't select a parent-element, but I don't know how to do it with jQuery.
You can trigger this event on clicking the submit button
if(jQuery('.form.a input').css('border')==2px solid #eb053b){
jQuery(this).siblings('label').css('color','#eb053b');
}
As I mentioned in the comments, the jquery validator adds a label after the input box by default with a class 'error'. Though I haven't found the hack for stopping the validator from doing this yet, here is something that I practice in my forms.
HTML:
<div class="row">
<input type="text" id="name" placeholder="Name (required)" name="name">
</div>
CSS:
.form.a input.error {border:2px solid #eb053b;}
label.error { color: #ebo53b;}
FIDDLE
This would produce a meaningful error message in a label after the input box in red color.
The error messages can be customized using the rules option of jquery validator, the placement of label (before or after) is changed by the errorPlacement option.
I'll update my answer if and when I find the exact solution to your problem.
I have set up a bootstrap modal with a form inside it, I just noticed that when I press the Enter key, the modal gets dismissed.
Is there a way not to dismiss it when pressing Enter?
I tried activating the modal with keyboard:false, but that only prevents dismissal with the ESC key.
I just had this problem too.
My problem was that i had a close button in my modal
<button class="close" data-dismiss="modal">×</button>
Pressing enter in the input field caused this button to be fired. I changed it to an anchor instead and it works as expected now (enter submits the form and does not close the modal).
<a class="close" data-dismiss="modal">×</a>
Without seeing your source, I can't confirm that your cause is the same though.
Just add the type="button" attribute to the button element, some browsers interpret the type as submit by default.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
This applies for all the buttons you have in the modal.
<button type="button" class="close" data-dismiss="modal">×</button>
I had this problem even after removing ALL buttons from my Bootstrap Modal, so none of the solutions here helped me.
I found that a form with a single text field would cause the browser to do a form submit (and result in dismiss), if you hit Enter while keyboard focus is on the text field. This seems to be more of a browser/form issue than anything with Bootstrap.
My solution was to set the form's onsubmit attribute to onsubmit="return false"
This may be a problem if you are actually using the submit event, but I'm using JS frameworks that generate AJAX requests rather than doing a browser submit, so I prefer disabling submit entirely. (It also means I don't have to manually tweak every form element that might trigger a submit).
More info here: Bootstrap modal dialogs with a single text input field always dismiss on Enter key
I had same problem, and i solved it with
<form onsubmit="return false;">
but there is one more solution, you can add dummy invisible input, so your form would look like this:
<form role="form" method="post" action="submitform.php">
<input type="text" id="name" name="name" >
<input type="text" style="display: none;">
</form>
You can put the login button before the cancel button and this would solve the issue you are having as well.
<div class="modal-footer">
<button type="submit" class="btn primary">Login</button>
<button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
I had a similar experience just now and the way I solved it was instead of using a tag, I changed the tag to an tag with type="button". This seemed to solve the problem of pressing the "enter" key and dismissing the bootstrap modal.
I had this problem too and I solved it this way. I added onsubmit to form. I also wanted to be able to use enter key as a saving key so I added save_stuff() javascript to onsubmit. return false; is used to prevent the form submit.
<form onsubmit="save_stuff(); return false;">
...
</form>
<script>
function save_stuff(){
//Saving stuff
}
</script>
In a html page I am making, I tried to make div's clickable using html and css. This has worked perfectly in some major browsers I have tested it in (Chrome, Firefox, Opera, Safari), as well as an HTC phone, but when I tried to test it on Iphone I noticed it just didn't work. The checkboxes themselves weren't even selectable.
This is my (working apart from on Iphone) code:
HTML:
<div class="" style="height: 30px;">
<div style="display: table; width: 100%;">
<div style="display: table-row; width: 100%;">
<div style="display: table-cell;">
<label for="3171">Text....</label>
</div>
<div style="display: table-cell; text-align: right;">
<input type="checkbox" id="3171" name="3171">
</div>
</div>
</div>
<label for="3171">
<span class="blocklink">Invisible text</span>
</label>
</div>
CSS:
.blocklink {
display: block;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
text-indent: -999em;
top: 0;
width: 100%;
}
So as you can see the technique I'm using is basicly just having a <label> spread all over the parent div so anywhere you click, it will tick/untick the linked checkbox.
Unfortunately, this doesn't work on IPhone. Would it be possible to somehow keep using this technique but also provide IPhone support? (Preferrably without javascript, because I'm really going out of my way to only use HTML & CSS)
Thanks in advance,
Arne
Adding an empty onclick="" to the label makes the element clickable again on IOS4. It seems that by default the action is blocked or overtaken by the press and hold copy and paste text mechanics.
<label for="elementid" onclick="">Label</label>
The problem seems to persists in iOS9 if any html elements are contained inside a label. At least happens with span elements inside it. 'pointer-events: none' fixes it.
<label for="target">
<span>Some text</span>
</label>
The code above would not be trigger a change of the target input, when the user taps 'Some Text', unless you add the following css:
label span {
pointer-events: none;
}
I solved it by placing an empty onclick="" on a parent element:
<form onclick="">
<input type="radio" name="option1" value="1">
<label for="option1">Option 1</label>
<input type="radio" name="option2" value="2">
<label for="option2">Option 2</label>
<input type="radio" name="option3" value="3" checked="checked">
<label for="option3">Option 3</label>
</form>
For some obscure reason, using CSS, if you apply:
label { cursor: pointer; }
Is going to work both on iPhone and iPad.
Another solution — albeit more hacky, but bulletproof — would be to absolutely position the checkbox over the label, z-index it, increase the width/height to encompass the underlying label and then 0 the opacity. This, of course would be tedious if there are multiple labels on the page... You naturally would also only implement the absolute positioning for that media size; no need to hack the whole app environment.
I ran into a somewhat unique situation. We were already using pointer-events: none on all spans in labels. However, we then needed to add in a <a> as clickable within one of those labels.
<label>
<span>Label text here. With a link text here.</span>
</label>
So, we explicitly set pointer-events: all on those <a>.
label > span { pointer-events: none; }
label > span > a { pointer-events: all; }
This is working in latest Chrome, Firefox, IE 11, and iOS 9 Safari.
If you change DOM on event handler (example in onMouseEnter) this cause skip all next handlers include onClick.
SetTimeout don't fix this.
Example:
1. in onMouseEnter use setTimeout with function injected new div in DOM
2. any onClick handler don't called.
Solution: avoid change DOM in events handler.
Remark: it problem found for label tag, but still persist for span inside label. May be this problem present on any type tags.
This behavuor found only for mobile iOS. In desktop Safari and in Mac OS Safari - all ok.
I narrowed down my problem to use of the Fastclick library; when I removed it from my codebase my issues went away, which indicates to me there isn't a native iOS/FF problem as suggested by other answers here.
Without knowing the libraries other folks are using, but knowing that Fastclick is exceptionally common, can I suggest that the root cause of this bug is in fact a library issue - not one which has managed to persist through years of Apple releases! It seems more likely. Maybe the others here can shed some light on whether they are using Fastclick?
More info
Some browsers prevent file inputs from being triggered by client code as a security measure. Try triggering a click event from the console with document.querySelector('input[type=file]').click() and it'll work, do the same from your code and it will mysteriously fail.
I imagine the reason this bug exists is because an ontouchstart handler is being applied to the <label /> by Fastclick. When it is triggered on a touch device, the library will proxy that event to the onclick handler, or in this case the native <label /> functionality. Unfortunately, this means that client code is triggering the file input opening, and it's being blocked by the browser.
I've noticed navigating in websites like Dell or Google, that typing in their search text box with iPhone, in the keyboard appears a blue button 'Search' instead of the standard 'Go' button that appears on any normal form.
What should you do to display the search button?
having type="search" is usually all you need to make software Search keyboard appear however in iOS8 it is mandatory to have a wrapping form with action attribute.
So the following code would have a software keyboard with “Return” button
<form>
<input type="search" />
</form>
But this code should have blue “Search” button instead
<form action=".">
<input type="search" />
</form>
You can influence this behaviour with:
<input type="search" />
JS Bin demo
Ignore the submit button's text being 'kettle,' I just wanted to be sure that it wasn't the submit button influencing the text of the iOS keyboard...
This is, of course, backwards compatible since a browser that doesn't understand type="search" will default to type="text", which is useful for creating forward-planning html5 forms.
I was not able to get the search button with
<input type="search" />
However, I did get it to appear with
<form>
<input name="search" />
</form>
On iOS 8 you can enable the blue "Search"-button on the keyboard by doing one of:
add input name=search
add input type=search
add id to input with the case sensitive word "search" in the ID, for
example the-search or thesearchgod
In HTML5 standard, adding enterkeyhint attribute on the input is the proper way to change the label on the virtual keyboard
<input enterkeyhint="search" />
If no enterkeyhint attribute is provided, the user agent might use contextual information from the inputmode, type, or pattern attributes to display a suitable enter key label (or icon).
See MDN Docs about enterkeyhint
When using #Anton Bielousov suggested solution, this also changes the styling of Android Devices. To counter this I had to:
Add form around input.
Add type="search"
Add name containing search
Add styling to counter the unwanted android styling
Android styling:
input[type=search] { -webkit-appearance: none; }
/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
<form action="" class="search-bar__form-form">
<input
class="search-bar__input"
name="search-bar"
type="search"
/>
</form>
The keyboard is handled by the operating system (iOS) and cannot be directly altered. The type of input required determines the type of keyboard to display.
If the website in question is HTML5, then #David's answer is valid.