I'm trying to make theme using Bootstrap and i'm having problems with textarea. it works fine in chrome and chrome based browsers but it looks odd and ugly in firefox. Here is a working fiddle (open in Firefox).
How do i fix it??? I want it to look normal. and i don't want to break anything else by fixing this.
<div>
<br />
<br />
<textarea id="s" type="text" name="s" value="Enter Text" ></textarea>
</div>
Add this to your css part:
textarea {
border: 1px solid #eee;
}
Related
I need to be able to prevent the Save Password bubble from even showing up after a user logs in.
Autocomplete=off is not the answer.
I have not come across a post that offers a secure solution for this issue. Is there really no way to disable the password bubble in Chrome??
I found there is no "supported" way to do it.
What I did was copy the password content to a hidden field and remove the password inputs BEFORE submit.
Since there aren't any passwords fields on the page when the submit occurs, the browser never asks to save it.
Here's my javascript code (using jquery):
function executeAdjustment(){
$("#vPassword").val($("#txtPassword").val());
$(":password").remove();
var myForm = document.getElementById("createServerForm");
myForm.action = "executeCreditAdjustment.do";
myForm.submit();
}
After hours of searching, I came up with my own solution, which seems to work in Chrome and Safari (though not in Firefox or Opera, and I haven't tested IE). The trick is to surround the password field with two dummy fields.
<input type="password" class="stealthy" tabindex="-1">
<input type="password" name="password" autocomplete="off">
<input type="password" class="stealthy" tabindex="-1">
Here's the CSS I used:
.stealthy {
left: 0;
margin: 0;
max-height: 1px;
max-width: 1px;
opacity: 0;
outline: none;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
z-index: -1;
}
Note: The dummy input fields can no longer be hidden with display: none as many have suggested, because browsers detect that and ignore the hidden fields, even if the fields themselves are not hidden but are enclosed in a hidden wrapper. Hence, the reason for the CSS class which essentially makes input fields invisible and unclickable without "hiding" them.
Add <input type="password" style="display:none"/> to the top of your form. Chrome's autocomplete will fill in the first password input it finds, and the input before that, so with this trick it will only fill in an invisible input that doesn't matter.
The best solution is to simulate input password with input text by replacing value with asterisks or dots manually.
I handled this with the following markup.
#txtPassword {
-webkit-text-security: disc;
}
<form autocomplete="off">
<input type="text" name="id" autocomplete="off"/>
<input type="password" id="prevent_autofill" autocomplete="off" style="display:none" tabindex="-1" />
<input type="password" name="password" id="txtPassword" autocomplete="off"/>
<button type="submit" class="login100-form-btn">Login</button>
</form>
<input type="textbox" id="UserID" />
<input type="password" style="display:none"/>
<input type="textbox" id="password" />
<script>
function init() {
$('#password').replaceWith('<input type="password" id="password" />');
}
</script>
tested in Firefox and chrome working as expected.
I found no alternative with all the benefits I need so, created a new one.
HTML
<input type="text" name="password" class="js-text-to-password-onedit">
jQuery (replace with vanilla JS with same logic if you don't use jQuery)
$('.js-text-to-password-onedit').focus(function(){
el = $(this);
el.keydown(function(e){
if(el.prop('type')=='text'){
el.prop('type', 'password');
}
});
// This should prevent saving prompt, but it already doesn't happen. Uncomment if nescessary.
//$(el[0].form).submit(function(){
// el.prop('readonly', true);
//});
});
Benefits:
Does not trigger prompt
Does not trigger auto fill (not on page load, nor on type change)
Only affects inputs that are actually used (allowing undisturbed element cloning/templating in complex environments)
Selector by class
Simple and reliable (no new elements, keeps attached js events, if any)
Tested and works on latest Chrome 61, Firefox 55 and IE11 as of today
First of all I wanna tell you something.
When you take [input type="text"] and also [input type="password"]
Major browsers give you popup for that.
Now, replace [input type="password"] to [input type="text"]
then there is css for that
#yourPassTextBoxId{
-webkit-text-secutiry:disc
}
I've subverted this by using 2 regular text boxes. One to contain the actual password and one to function as a mask. I then set the password box's opacity to 0 and the mask text box is disabled - but the background color is set to white making it appear enabled. Then I place the password box on top of the mask box. In a jscript function I update the mask's text value to display a string of '*' characters with each keypress in the password box. Two drawbacks: the blinking cursor might now show depending on your browser. It shows in IE, but not Chrome or Firefox. There's a bit of a delay as the user is typing.
My code snippet is in asp:
$(window).ready(function() {
var pw = $('#txtPassword');
var mask = $('#txtMask');
$(pw).css('opacity', '0');
$(pw).keyup(function() {
var s = '';
for (var i = 0; i < $(pw).val().length; i++)
s = s + '*';
mask.val(s);
})
});
style... .password {
font-family: monospace;
position: absolute;
background-color: white;
}
Asp.net code:
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtMask" ClientIDMode="Static" MaxLength="30" Enabled="false" />
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtPassword" ClientIDMode="Static" MaxLength="30" />
I had two issues with how browsers force their password behavior on you when working on a support-only login page within a regular page (the support login should never be saved):
The browser will recommend a login from the rest of the page which gets in the way.
The browser will ask to save the entered tech password.
So I combined two solutions I found on various stackoverflow posts and thought I'd post them here. I'm using jQuery, but the principle can be translated into regular JavaScript as well.
First, have your password field start as a text field and have JavaScript change it later - this gives a decent chance that the browser won't offer a saved password.
Second, just before submitting the form, set the password form back to being a text field, but hide it first so the password can't be seen. This could be made to look prettier by adding another text field when the password field disappears, but that's cosmetic only.
<form id="techForm" action="...">
<input type="text" id="username" name="username">
<input type="text" id="password" name="password"> <!-- this needs to start as a text field -->
<input type="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
$(function()
{
$('#password').on('focus', function()
{
$(this).prop('type', password'); // this stops pre-saved password offers
});
$('#techForm').on('submit', function()
{
$('#password').hide().prop('type', 'text'); // this prevents saving
});
});
</script>
This worked for me on Firefox and Chrome as of 9/12/2017.
The only thing worked for me was adding a space to input's value after document ready and then deleting the space when user focused on the input.
$('.login-input').val(' ');
$('.login-input').on('focus', function() {
$(this).val('');
});
Simple and easy. Works on Chrome 64. In Firefox all you need is adding autocomplete="off" attribute to the input.
My own solution jQuery with PrimeFaces. Tested work in Chrome and Internet Explorer but in mozilla firefox (though not in Firefox)
<script type="text/javascript" charset="utf-8">
$(function(){
$('#frmLogin').on('submit',function(e){
$(PrimeFaces.escapeClientId('frmLogin:usuario')).replaceWith('<label id="frmLogin:usuario1" type="text" name="frmLogin:usuario1" autocomplete="off" class="form-control" maxlength="8" tabindex="2"/>');
$(PrimeFaces.escapeClientId('frmLogin:password')).replaceWith('<label id="frmLogin:password1" type="password" name="frmLogin:password1" autocomplete="off" value="" tabindex="3" class="form-control"/>');
$(PrimeFaces.escapeClientId('frmLogin:password1')).attr("autocomplete","off");
$(PrimeFaces.escapeClientId('frmLogin:usuario1')).attr("autocomplete","off");
$(PrimeFaces.escapeClientId('frmLogin:password_hid')).attr("autocomplete","off");
$(PrimeFaces.escapeClientId('frmLogin:usuario_hid')).attr("autocomplete","off");
});
});
</script>
<h:inputSecret id="password" value="#{loginMB.password}" class="form-control"
placeholder="Contraseña" tabindex="3" label="Contraseña" autocomplete="off" disabled="#{loginMB.bdisabled}"/>
<p:inputText value="#{loginMB.password_hid}" id="password_hid" type="hidden" />
If you choose to let Google Chrome save website passwords, you'll see a prompt every time you sign in to a new website. If you click Never for this site in the prompt, your password for the site is not saved and the site is added to a list of passwords that are never saved.
You can edit this list AND DISABLE THE PROMPT:
Click the Chrome menu Chrome menu on the browser toolbar.
Select Settings.
Click Show advanced settings.
Click Manage saved passwords.
In the Passwords dialog that appears, scroll down to the "Never saved" section at the bottom.
To remove a site from this list, select it and click the X that appears the end of the row.
Now revisit the website and you should see the prompt to save your password information again, if you've allowed Google Chrome to show the prompt.
I have given a type="number" to an INPUT tag, and I kown that IE9- didn't support number type. I try to make some js code to compactible to IE9-, so I test in IE11(and change compact mode to IE9).
But, when I want to get the type of a input:number, it always return 'text'. I tried these ways:
first, my html is:
<input name="field11" type="number" min="1" max="99">
then, I try to get the type, it should be number theoretically:
- input.type; // text
- input.getAttribute('type'); // text
- input.getAttributeNode('type').value; //text
and css will not work either:
input[type="number"] {
border: 1px solid #f00;
}
How Strange!
but, if i change the type to an definitely unsupported one, like numberd:
<input name="field11" type="numberd" min="1" max="99" >
all of above code will work correctly and show numberd!! Even I change css to numberd it will work too!! why?!
below is snippet:
input[type="number"] {
border: 1px solid #f00;
}
input[type="numberd"] {
border: 1px solid #0f0;
}
type="numberd" should be green border:
<input id="input1" type="numberd" min="1" max="99" onclick="alert(this.getAttribute('type'))" />
<br>
type="number", should be red border
<input id="input2" type="number" min="1" max="99" onclick="alert(this.getAttribute('type'))" />
At the end, my question is, how to get the actual type of the input:number in IE9-? Can somebody help me ?
I imagine that you're having to do the same thing I just did and run IE11 in IE9 mode. I know that IE9 treats unknown types as text, but I'm not 100% certain it would actually "convert" the type when adding the element.
I would not rely on the type attribute for what you want. Instead, I would add a class to the inputs you want to verify and check for it. You could also add a custom attribute and check for it.
I think this quesition is a big problem and I can't find how to solve it by myself, and my quesition isn't similar with other's. but I can't get more answers or even views.
just 18 times view util now (half is from me). I think I will have no quesitions on stackoverflow. Bye guys, thanks for helps
This works for me, when I try to just keep it numeric
In html body section:
<input onkeyup="if(this.value=='-'){}else{if(isNaN(this.value)){this.value='';}}"></input>
It will clear the input once it is not numeric..
H, I am new to browser compatibility issue debugging.
I have following html segment:
<div class="settings_content">
...
...
<div class="field">
<input name="name" maxlength="256" type="text" size="32" value="" class="noBdr" disabled="">
</div>
and I have a corresponding CSS for the input field:
.settings_content input
{
color: #505050;
}
in browser Chrome, IE10, IE9, the text indicated by that "input" tag will all be rendered correctly as black. However, if I test it in IE8, the text will still be shown, but the color will turn into grey.
I don't think this is a CSS issue but more of a cross-browser issue. Could experts give me some hints on where to debug? Thanks!
Unfortunately, you can't change the color of a disabled input in Internet Explorer 7, 8 or 9. If it were a regular input, your styles would have applied even without the !important part suggested in the previous answer.
For more info on the topic consider reading another thread.
EDIT:
It works in IE10 though.
You can open this fiddle in IE to check.
Try using !important
Like this:
.settings_content input
{
color: #505050 !important;
}
This might solve your problem...
OR
Use inline css like:-
<input /**********/ style="color: #505050 !important;" />
OR
Use some Browser Hacks for this...
I have a form with some input fields and a hidden submit button (hidden via style="display:none").
When you hit the return key when an input field is focused in Firefox, the form submits.
However in Chrome, when you hit return, nothing happens. I was wondering, how do you add this functionality back to Chrome?
Here's the form, take a look at it in Chrome:
http://jsfiddle.net/B59rV/2/
<form method="post" action="/xxxx" accept-charset="UTF-8">
<input type="hidden" value="SSjovFqEfRwz2vYDIsB6JRdtLAuXGmnT+tkyZnrtqEE=" name="authenticity_token">
<div class="input text_field">
<label>Email</label>
<input type="text" size="30" name="user_session[email]" />
</div>
<div class="input text_field">
<label>Password</label>
<input type="password" size="30" name="user_session[password]" />
</div>
<input type="submit" value="Sign In" style="display: none;" >
</form>
I have literally no idea why it's not working in Chrome. I think it's a bug.
However, it is somehow to do with that display: none.
I found a nasty, horrible (!!) workaround:
input[type="submit"] {
position: absolute;
top: -1000px
}
Don't hide it: instead, position it off the screen.
Live Demo - works in Chrome.
Tested in Chrome 22 and Firefox 18 perhaps this is the best workaround
.hide-submit {
position: absolute;
visibility: hidden;
}
<button type="submit" class="hide-submit">Ok</button>
Or a more generic way
input[type=submit].hide,
button[type=submit].hide {
display: block;
position: absolute;
visibility: hidden;
}
<input type="submit" class="hide">Go</input>
This basically hides the element in plain sight, no need to push it outside the screen
The best way to do this is:
<input type="submit" hidden />
Example:
<form onSubmit="event.preventDefault(); alert('logging in!')">
<label for="email">email:</label>
<input type="email" name="email" required />
<label for="password">password:</label>
<input type="password" name="password" required />
<input type="submit" hidden />
<p>Press enter to log in</p>
</form>
Probably a security "feature", although I haven't found a definitive explanation yet. I tried http://jsfiddle.net/B59rV/2/ without the password field and the alert occurs as expected. Same thing happens in IE8 for what it's worth. Those are the only browsers I have on this machine, so haven't tested on any others.
The only workaround i found, at least as dirty as positioning it out of the screen, is width:0; height:0; : somehow, Chrome doesn't interpret it like a hidden element
This is like Pioul's answer but I needed to do the following for a input[type=file] element:
position:absolute; //this helps the "hidden" element not disrupt the layout
width:0;
height:0;
// For <= IE7 a 1px piece of the form element still shows
// hide it with opacity=0; Tested element was input:file.
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
NOT tested with input[type=text]
Just another approach but I don't think this is much better than the accepted answer.
I have an input type="file" element with size="70" and width="522px". It looks and works fine in all browsers on Windows but in Firefox on Linux the input element is bigger than 522 pixels.
Things I tried:
max-width:522px but it doesn't work (Linux).
setting size="52" and min-width:522px; looks fine in Linux but doesn't work on in Firefox on Windows.
What can I do to specify 522 pixels width?
The problem is that the browser doesn't consider the button as part of the input. So if you have something like:
<div style="width: 500px; overflow: hidden">
<input type="file" id="uploadfile_0" class="fileinput" style="border: 2px solid #a9a9a9; width: 100%; height: 22px;" name="uploadfile_0"/>
</div>
The input button browse is outside the parent, and I don't think there is an easy solution to this.
You can read about styling input type="file" on quirksmode.org
Specify only CSS width, like this:
<input type="file" style="width: 522px;" ..... />
The only way that I've ever seen file input fields styled is through a trick where the field is actually on top of an image and the field is given zero opacity.
function inFil() {
var inFil = document.getElementById("inFil");
var iSize = inFil.files[0].size;
alert(iSize);
// where inFil is existing html tag <input type="button" id="inFil" >
}
Works with Firefox, but does not works with IE8, others not tested.