I want to make phone based textbox in my html-page. someone have idea how I can do this.
Thanks
This is the plugin I always use for that. works great:
http://digitalbush.com/projects/masked-input-plugin/
for your example:
jQuery(function($){
$(".phone").mask("(999) 999-9999",{placeholder:" "});
});
Depending on how complicated you want to get, you could use a simple background for the input box with the () and - inserted (albeit much smaller in order to fit).
A more complicated approach would be to have 3 textboxes, for each part of the number. Then put the () and - between the boxes. This may frustrate users though, as they will have to tab or click between the boxes.
You could modify the above method to include some javascript, which automatically changes focus from one textbox to another after the user finishes typing. This may work better, but will cause problems if the user ever tries to go back and edit their number.
Another way you could do this is to insert the () and - automatically with javascript after the number is changed. This may work better than the above method, but will still cause some issues with editing. It may also look strange before the numbers are added in.
It is worth noting that there is no real international standard for phone numbers. You might get into trouble if someone tries to use a country code or something on your site. If I were you I would just stick to the classic text box, ugly as it may be.
You can try something like this
<input type="text" id="phoneNumber" placeholder="(123)123-1234" />
CSS
#phoneNumber{
margin:1em;
border:2px solid #ffc600;
font-size:2em;
border-radius:10px;
padding:.25em;
}
Example: http://jsfiddle.net/RgTTt/
NB: Placeholder will, in all modern browsers, render whatever you like in the input box and then disappear once the user starts to type in the box. If you want the parentheses - () - to be colored, then you will need to use some spans and a custom piece of javascript.
Related
Sorry if this is a duplicate, I can't find a similar question for the life of me.
I'm trying to use a <datalist> input on a form and it works but I need to have it 'autocomplete' the top search result right into the input box as the user types... Let me be clearer:
I already have the functionality working that filters out results based on what's typed into the <input> text box, as you would expect a <datalist> to behave. What I'd really like is for the user to not have to actually 'choose' a value and put it straight in.
This page (and the codepen therein) pretty much demonstrates what I'm looking to do (albeit without <datalist>) - note that as you type, the field is filled out for you with every keystroke - then you can just tab out of the field and keep your value
I have tried the above solution but for some reason in my project it does not work, even if I copy the code out verbatim.
Anyone know how I can acheive this with a <datalist>?
Edit: an image for further explanation - if I start typing 'all', I'd like 'AllStar Sports' to fill out the rest of the feild, as it was the top result:
I have a dynamically generated form that needs to gather several numerical values from a user that totals 100 (%). I thought about writing a script/algorithm that adjusts the remaining values of several text fields - so that when the user changes one value, the remaining values dynamically change (so that the values always total 100).
However, instead of text fields, I would really prefer something more user-friendly like sliders that move when one slider is adjusted or some other user-friendly widget (like an adjustable pie chart(?) that always totals 100%).
The script needs to work in late version of Firefox, Chrome and IE. I read somewhere that HTML5 sliders don't work in Firefox.
I am open to different solutions.
Am not getting your question clearly, assuming that you need a value slider which a person will slide and automatically the bar will increment every time by 1, so try using jQuery and Ajax, will suit your requirements, you can check out few over here.
Sliders work fine in FireFox - try http://www.colorpicker.com/
You can use the jQuery UI slider, if you like. You can register a custom function on change event which easily adjusts the other sliders.
So in the end you got something like this (some pseudo-code in it):
$( "#slider1" ).slider({
change: function(event, ui) {
var i = 100 - value_of_slider1 / number_of_sliders_remaining;
$("#slider2).setValue(i);
$("#slider3).setValue(i);
}
});
Of course this can be implemented a lot more sophisticated. Just to give you the basic idea. Depends on your markup.
I have not had problems with sliders in FireFox.
You can have the various sliders/input devices calculate on each other to get the output by division or whatever, then have the last/smallest number be subtracted rather than divided from the total. This way your other calculations will be accurate to the accuracy and the least significant value can make up the rest.
I'm talking about your standard:
<select>
<option>blah blah</option>
<option>blah bl</option>
</select>
my problem is, for the dataset I must include in this dropdown, I've got a few outliers:
That's a distribution graph of the total occurrences (y-axis) of all character counts (x-axis) for the strings in the dropdown.
The average is only ~18.5 characters, but accommodating the 101 char string forces me to use a really small font.
Is there a way to wrap text inside a <option></option> ? I tried just dropping a <br /> inside the middle of the string and that didn't validate.
In general, native <select> and <option> form controls offer very little control over how they can be styled, especially if cross-browser compatibility is a concern. If you want to be able to control things much better, your best bet is to have everything in a normal <select> box (for accessibility) and then to override it with a fake select box using JavaScript. I've had to do this in the past and the jQuery UI library worked well for me.
In your case, one possible UI that might would (if you go the JavaScript replace route) would be to use an ellipsis on the long elements, but then show their full text on mouseover and focus (it's early, so these might not be the correct events, but you get the idea).
Once you have JavaScript controlling a fake select box, there's really no end to what you can do for the UI behavior, but ultimately, if you need control, native form controls usually don't cut it.
I'm replacing a winforms screen with an html interface, which needs to run in IE7/8/9 & Firefox.
Currently on one of our screens we have a funky input control that looks like this:
The user can enter a value in one of three ways:
the user can just type into the box
the user can select an item from the dropdown
the user can tick the ‘Unopened’ checkbox, which effectively chooses a known item we call ‘Unopened’
There’s also a search button ‘…’ but that’s another control which is easy to implement.
I want to rebuild this using html and am wondering how to replace the Unopened function, as (a) and (b) are easy enough. I’m thinking I’ll just put a separate Unopened checkbox beneath the INPUT box instead of inside it, because that would be simpler. But if there's a way to keep it looking like it does now I’d probably prefer that. Is that possible?
UPDATE:
Secondary question: if I do put the checkbox inside the INPUT box using CSS am I just bringing upon myself a lot of pain with quirky little usability or layout problems or is this something that's not too unusual or hard to do?
You can put it in a separate div and then position it with CSS to look like it's inside of the input field:
#checkbox {
position: relative;
top: -10px;
}
or whatever values you need...
Regarding your second question: Nope. It's not actually "inside" the box, it just appears that way. All the functionality will still be there. =)
http://jsfiddle.net/BdBTy/ is a quick example of how this works.
place the check right below the textbox in html
in css for the checkbox put
margin-top:-25px;
(or whatever exact number you need)
I would like to know if there is anyway I can divide an item on two line inside a select box.
One of the values of my select box is two long to fit in my div.
No, this is impossible.
You can consider using a javascript widget, like this jQuery plug-in.
May I also say that what you are trying to do is uncommon - even in desktop applications users don't expect to find wrapped text in a drop-down box and may get confused if they do see one. It would be better to try a different control or try to limit the text.
It is impossible, but if it's simply a matter of avoiding that the element gets too wide you could just define a width (eg. <select style="width:100px;">). This will cause text to be cut off when the box is "closed", but as soon as you "open" it the entire text will be shown.
As far as I know, it's impossible. However, I'd look at jQuery for options. Specifically, there are jQuery plugins that allow for select box customization.
Select Box Factory 2.0 is one option. I believe it extends the functionality of the select box to allow text wrapping among other features.
You could simple add an option disabled in blank
<option disabled selected value> </option>
Divide an item that's on two lines in a select box.
Why would you want to do that? If you're using a JQuery plugin to make HTML display inside an option tag, then there would be no reason to ask this question, I don't think, as you would be already able to add a tag.
What you can do to make spacing in select elements, is to create a blank option tag, that has an empty value and name. You would then have to validate the submission to detect if a blank value was submitted.
If you are really in need, a hacky solution would be to take a screenshot of the text on two lines, and use images in your select box.
http://www.jquerybyexample.net/2012/05/how-to-add-images-in-dropdown-list.html
Just be sure to set the alt tag on the images for accessibility.