Is there a way to put text in a textbox but also allow the user to type something. I would like to write "username:" inside the box and allow the user to type after the colon. I can do this the hard way by creating a div right next to a textbox and make it look like they are one container, but I was wondering if there was an easier way? Thanks
EDIT: I don't want to text to disappear. I just want to user to be able to continue typing
EDIT 2: the reason you cant put a value in the textbox is because its a form. when the user types a username next to the value it will submit together
HTML5 has a placeholder attribute you can now use:
<input type="text" placeholder="username" />
People have also created javascript functions that mimic this functionality.
There's also a jQuery placeholder plugin which does the same, if you'd like to go that route.
What's wrong with using standard HTML? You don't say that you need it to disappear...
<input type="text" value="username: " />
If you need it to disappear, use a placeholder attribute and a jQuery plugin as a fallback (for the browsers that don't support it.
You could do something like this:
<div>
<label>Username:</label>
<input type="text" />
</div>
CSS
div{border:1px solid gray;}
label{font-family:arial; font-size:.8em;}
input{border:none;}
input:focus{outline:none;}
Basically, created a containing div and placed a label and input in that div. label is the words that stay in the field. input has the border removed.
http://jsfiddle.net/jasongennaro/rZmFx/
Fyi... you may need to increase the size of the input, depending on how many characters you want to accept.
<input type="text" placeholder="Category"/>
Maybe that can help you. If you want the textbox for only read you can put the property readonly = "".
You could call this javascript function once the page is loaded:
function add(text){
var TheTextBox = document.getElementById("Mytextbox");
TheTextBox.value = TheTextBox.value + text;
}
If you are using HTML5, you can use the placeholder attribute.
http://www.w3schools.com/html5/att_input_placeholder.asp
Related
Is there a way to prevent the LastPass browser extension from filling out a HTML-based form with an input field with the name "username"?
This is an hidden field, so I don't want any software to use this field for their purposes:
<input type="text" name="username" id="checkusername" maxlength="9" value="1999" class="longinput" style="display:none">
The solution should not be like "rename the input field".
Adding
data-lpignore="true"
to an input field disabled the grey LastPass [...] box for me.
Sourced from LastPass.com
Two conditions have to be met:
The form (not the element) needs to have autocomplete="off" attribute
Lastpass user needs to have this option enabled:
(old) Settings > Advanced > Allow pages to disable autofill
(new) Account Options > Extension Preferences > Advanced > Respect AutoComplete=off: allow websites to disable Autofill
So this depends on both user and the developer.
What worked for me is having word "-search-" in the id of the form, something like <form id="affiliate-search-form"> - and lastpass doesn't add its elements onto the form inputs. It works with something simpler like <form id="search"> but doesn't work with <form id="se1rch">
I know I'm late to the party here, but I found this when I was trying to stop lastpass from ruining my forms. #takeshin is correct in that autocomplete is not enough. I ended up doing the hack below just to hide the symbol. Not pretty, but I got rid of the icon.
If any lastpass developers are reading this, please give us an attribute to use, so we don't have to resort to stuff like this.
form[autocomplete="off"] input[type="text"] {
background-position: 150% 50% !important;
}
I think lastpass honors the autocomplete="off" attribute for inputs, but I'm not 100% sure.
EDIT
As others have pointed out. this only works if the user has last pass configured to honor this.
For me worked either type=search which is kinda equal to text or using role=note.
You can check the LastPass-JavaScript but it's huge, may be you can find some workaround there, from what I saw they only check 4 input types, so input type=search would be one workaround:
!c.form && ("text" == c.type || "password" == c.type || "url" == c.type || "email" == c.type) && lpIsVisible(c))
Also those are the role-keywords they seem to ignore:
var c = b.getAttribute("role");
switch (c) {
case "navigation":
case "banner":
case "contentinfo":
case "note":
case "search":
case "seealso":
case "columnheader":
case "presentation":
case "toolbar":
case "directory":`
I checked LastPass' onloadwff.js, prepare for 26.960 lines of code :)
Add "search" to input id
<input type="text" name="user" id="user-search"/>
Bit late to the party but I have just achieved this with modifying the form with:
<form autocomplete="off" name="lastpass-disable-search">
I guess this fools lastpass into thinking that it's a search form. This does not work for password fields however! Lastpass ignores the name field in this case.
The only way I've managed to do this is to add the following directly at the top of the form:
<form autocomplete="off">
<div id="lp" ><input type="text" /><input type="password" /></div><script type="text/javascript">setTimeout(function(){document.getElementById('lp').style.display = 'none'},75);</script>
</form>
It causes a nasty flicker but does remove the autofill nonsense - though it does still show the "generate password" widget. LastPass waits until domready and then checks to see if there are any visible password fields, so it's not possible to hide or shrink the mock fields above.
This ES6 style code was helpful for me as it added data-lpignore to all my input controls:
const elements = document.getElementsByTagName("INPUT");
for (let element of elements) {
element.setAttribute("data-lpignore", "true");
}
To access a specific INPUT control, one could write something like this:
document.getElementById('userInput').setAttribute("data-lpignore", "true");
Or, you can do it by class name:
const elements = document.getElementsByClassName('no-last-pass');
for (let element of elements) {
element.setAttribute("data-lpignore", "true");
}
For this latest October 2019 buggy release of Lastpass, this simple fix seems to be best.
Add
type="search"
to your input.
The lastpass routine checks the type attribute to determine what to do with its autofill, and it does nothing on this html5 type of "search." This fix is mildly hacky, but it's a one line change that can be easily removed when they fix their buggy script.
Note: After doing this, your input might appear to be styled differently by some browsers if they pick up on the type attribute. If you observe this, you can prevent it from happening by setting the browser-specific CSS properties -webkit-appearance and -moz-appearance to 'none' on your input.
None of the options here (autocomplete, data-lpignore etc.) prevented LastPass from auto-filling my form fields unfortunately. I took a more sledge-hammer approach to the problem and asynchronously set the input name attributes via JavaScript instead. The following jQuery-dependent function (invoked from the form's onsubmit event handler) did the trick:
function setInputNames() {
$('#myForm input').each(function(idx, el) {
el = $(el);
if (el.attr('tmp-name')) {
el.attr('name', el.attr('tmp-name'));
}
});
}
$('#myForm').submit(setInputNames);
In the form, I simply used tmp-name attributes in place of the equivalent name attributes. Example:
<form id="myForm" method="post" action="/someUrl">
<input name="username" type="text">
<input tmp-name="password" type="password">
</form>
Update 2019-03-20
I still ran into difficulties with the above on account of AngularJS depending upon form fields having name attributes in order for ngMessages to correctly present field validation error messages.
Ultimately, the only solution I could find to prevent LastPass filling password fields on my Password Change form was to:
Avoid using input[type=password]entirely, AND
to not have 'password' in the field name
Since I need to be able to submit the form normally in my case, I still employed my original solution to update the field names 'just in time'. To avoid using password input fields, I found this solution worked very nicely.
Here's what worked for me to prevent lastpass from filling a razor #Html.EditorFor box in Chrome:
Click the active LastPass icon in your toolbar, then go to Account Options > Extension Preferences.
On this screen check "Don't overwrite fields that are already filled" (at the bottom)
Next, click "advanced" on the left.
On this screen check "Respect AutoComplete=off: allow websites to disable Autofill".
I did not need to do anything special in my ASP cshtml form but I did have a default value in the form for the #Html.EditorFor box.
I hope this helps and works for someone. I could not find any Razor-specific help on this problem on the web so I thought I'd add this since I figured it out with the help of above link and contributions.
For someone who stumbles upon this - autocomplete="new-password" on password field prevents LastPass from filling the password, which in combination with data-lpignore="true" disables it at all
Try this one:
[data-lastpass-icon-root], [data-lastpass-root] {
display: none !important;
}
Tried the -search rename but for some reason that did not work. What worked for me is the following:
mark form to autocomplete - autocomplete="off"
change the form field input type to text
add a new class to your css to mask the input, simulates a password field
css bit: input.masker {
-webkit-text-security: disc;
}
Tried and tested in latest versions of FF and Chrome.
type="hidden" autocomplete="off"
Adding this to my input worked for me. (the input also had visibility: hidden css).
Update NOV 2021
I have noticed that all LastPass widgets are wrapped in div of class css-1obar3y.
div.css-1obar3y {
display: none!important;
}
Works perfectly for me
None of these work as of 10/11/2022.
What I did was add the following to a fake password field
<input id="disable_autofill1" name="disable_autofill1"
style="height:0; width:0; background:transparent;
border:none;padding:0.3px;margin:0;display:block;"
type="password">
This seems to be enough to minimize the size this element takes on screen (pretty much 0 for me) while still not triggering last pass's vicious algorithm. Put it before the real password field.
I'm sure a variant of this could be used to fool last pass for other fields where we don't need autofill or to suggest a new password.
I have a form input tag with some text assigned to its value attribute:
<input type="text" name="firstName" value="First Name*" />
Since this is a required field, how do I style the asterisk at the end of the "First Name*" string to be the color red? Is this even possible?... How do you style the values of pre-populated form fields?
Thank you.
I think you're making this more complicated then it should. There may be a way using javascript or jquery but I think that's overkill.
I would just put it on the outside of the box and style it within a <span> tag.
I don't think you can style one character to be red but you could style the whole string to be red.
What I would probably do is set the asterisk outside the input box and style it like this
<input ...value="FirstName"><span style="color: #FF0000;">*</span>
No, it's impossible. You'd have to fake it.
However, that's what <label>s are for!!
<label>First Name* <input name=firstName required></label>
Even if it would be possible, it'd not be a good practice. Data should always be separated from the representation. You don't want anything else but the data that you really need to be posted.
It'd be a good idea to go with the jQuery solution that simply assigns a class to the input field on post if there's an error, e.g. makes the text inside the input red, draws the red border around the input box etc.
If you're using asp .net why not just use the required field validator control and let it do the work for you.
Instead of adding * to the field, I would suggest signifying the required field by modifying the element's styling through CSS and jQuery/JavaScript.
Working example: http://jsfiddle.net/wstGQ/
CSS:
input {
color: #ccc;
}
.required {
color: #FF0000;
border: 1px solid #FF0000;
}
jQuery:
$('input').focus(function(){
var obj= $(this);
var oldVal = obj.val();
obj.blur(function(){
if(obj.val() == oldVal){
obj.val('Please enter a valid option').addClass('required');
}else{
obj.removeClass('required');
}
});
});
I'm using <input type="file" /> in my webpage. I've different CSS classes for button and other controls. But I'm not able to add any class, style to browse button that appears due to above tag.
Is there any way to change its default appearance?
Thanks is advance.
You can't do that. You could only apply style to the entire <input />.
You could use opacity: 0 CSS hacks to replace it with you favorite image and image:hover.
Keep in mind that height: property will not work on Firefox 3.6; You could use font-size: to enlarge the height instead.
I have an example made: http://timc.idv.tw/html5-file-upload/ ; inspect the CSS of the 2nd demo.
You can't style the file input directly, but you can indeed give it some faux styling and/or make it invisible but still clickable. There's an article on how to do so at Quirksmode.
The <input type="file" /> control is notoriously difficult to style.
Here are some articles that can help.
There are also some nice libraries for styling hard-to-skin form elements. Uniform is nice for selects and upload fields.
You can't style a file input button with CSS. This is not the only element that you can not style. Some other inputs are not accepting styles. Look at this fiddle to see many types of inputs. Based on your browser some inputs renders different. Inputs like range input or date inputs are using OS level UI that is not editable by CSS.
What you can do is hiding the file input and showing another element like a div or another input that is accepting styling like button type input as your file input and trigger trigger click and submit (hitting enter) events on your hided actual file input.
Code example:
HTML
<input type="file" />
<label>Select file to upload: <input type="button" /></label>
CSS
input[type="file"]{visibility:hidden; width:0;}
JavaScript:
var fileInput = document.querySelectorAll('input[type="file"]')[0],
fakeFileInput = document.querySelectorAll('label')[0],
clickEvent = document.createEvent('MouseEvent');
clickEvent.initMouseEvent('click',true,true,document.defaultView,1,0,0,0,0,false,false,false,false,0,null);
fakeFileInput.addEventListener('click', function(event){
fileInput.dispatchEvent(clickEvent);
}, false);
Look at fiddle in action
So answer of you question is: No, unfortionantly you can not style file input BUTTON!
I'd like to create an HTML form submit button with the value 'add tag', however, the web page is in Swedish, so I'd like to have a different button text.
That is, I want to have a button like
but I want to have my code like
if (request.getParameter(cmd).equals("add tag"))
tags.addTag( /*...*/ );
Is this possible? If so, how?
It's possible using the button element.
<button name="name" value="value" type="submit">Sök</button>
From the W3C page on button:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content.
Following the #greg0ire suggestion in comments:
<input type="submit" name="add_tag" value="Lägg till tag" />
In your server side, you'll do something like:
if (request.getParameter("add_tag") != null)
tags.addTag( /*...*/ );
(Since I don't know that language (java?), there may be syntax errors.)
I would prefer the <button> solution, but it doesn't work as expected on IE < 9.
There are plenty of answers here explaining what you could do (I use the different field name one) but the simple (and as-yet unstated) answer to your question is 'no' - you can't have a different text and value using just HTML.
I don't know if I got you right, but, as I understand, you could use an additional hidden field with the value "add tag" and let the button have the desired text.
If you handle "adding tag" via JScript:
<form ...>
<button onclick="...">any text you want</button>
</form>
Or above if handle via page reload
I have a bunch of optional "write-in" values for a survey I'm working on.
These are basically a radio button with a textbox within the answer field - the idea being that you would toggle the button and write something into the box.
What I'd like to do is have the radio button toggled whenever a user clicks in the text field - this seems like a use-case that makes a lot of sense.
Doing this:
<input type="radio" id="radiobutton"><label for="radiobutton">Other: <input type="text" id="radiobutton_other"></label>
works fine in Chrome (and I am guessing, other WebKit browsers as well), but there are weird selection issues in Firefox, so I'm assuming its a non-standard practice that I should stay away from.
Is there a way to replicate this functionality without using JavaScript? I have an onclick function that will work, but we're trying to make our site usable for people who might have NoScript-type stuff running.
Putting an input inside a label actually has a slightly different meaning. It doesn't make the input itself a label, it implicitly associates the label with the input in the same way as if they were linked by a for/id.
However, this only happens when the label doesn't already have a for attribute to override that (see HTML4 s17.9: “When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.”). It is unclear according to spec what should happen when both containment and for are present.
(And also it doesn't work in IE, which makes the point moot in practical terms.)
No, you'll need some scripting for this.
<input type="radio" id="radiobutton">
<label for="radiobutton_other">Other:</label>
<input type="text" id="radiobutton_other">
<script type="text/javascript">
var other= document.getElementById('radiobutton_other');
other.onchange=other.onkeyup= function() {
if (this.value!=='')
document.getElementById('radiobutton').checked= true;
};
</script>
It (an input inside a label) validates just fine as HTML 4.01. One potential issue I can see with your code is that both radio elements have the same ID in your example. Element IDs must be unique in HTML and XHTML documents and you should use the name attribute instead to identify a radio group.
If you are still having trouble after changing this, you will have to move the input outside of the <label> element and use scripting.