I have a name input box. I would like to auto-capitalise the first letter of the name as the user types, but allow the user to override the change for names such as "de Salis".
I see here that this is impossible with CSS, because text-transform:capitalize; will capitalise every word and can't be overridden.
A .keyup handler can fix up the first letter as you type, and there are a bunch of solutions found here to do that.
What I can't see how the original capitalisation can be overriden easily. I guess I need a flag, but if the function is one that can be attached to multiple elements, where should the flag live? I could append a DOM element as a flag, but this seems pretty ugly.
A fiddle of the non-override model is found here.
Suggestions?
To have the input box show only the first capital letter, you can use the keyCode directly, as that is always in uppercase format.
That alone will alleviate the requirement for expensive regex and .replace() methods your using.
jQuery:
$('.auto').one('keyup', function(e) {
$(this).val(String.fromCharCode(e.keyCode));
});
Reference: jsFiddle
The following answer has been revised to include Tab Key requirements, clicking inside of input box and pasting via context-menu, using keyboard paste method (Ctrl + V), and directly typing into it. It does away with the character keyCodes so international support is acknowledged. The jQuery selector was obtained here.
RE-Revised: jsFiddle (Does not force capital letter on submit.)
Related
Is there a way to ignore the spaces in the string of the text field on the 'change' event. For example #(x) ( sin(x) )and#(x) (sin(x)) are treated as two different function strings, and a change event is triggered on text field change
The solution is to watch for the input changes in JavaScript, when it change it will have value, save it into a variable removing all the whitespaces, next time when value comes remove all the whitespaces and compare with previous string variable, if both are same Do Nothing else Do Something! you can find sample code here.
For removing whitespace used this.
I'm reading through this section of the guide. I'm testing the complex component in the tutorial.
What I'm not understanding is why these two lines exist together, I believe only the first one should.
fillIn('.list-filter input', 'Seattle');
keyEvent('.list-filter input', 'keyup', 69);
In the first line, we fill in the input field which should automatically trigger a filtering of the results. Why are we adding an extra e to the field (keycode 69)? It's like we're going to search Seattlee (note the two e's at the end). Is the keyEvent method necessary to activate the triggering of the refresh but it actually doesn't print to the input field?
I suppose the keyup event doesn't enter a char. It simply does for its name stands for: fires the key up event. You can press a char on the keyboard and see, that the char is being added before you release the key. I'm sure this is specified somewhere, but I don't know this. My reason is the common sense.
So in order to trigger some functionality in that example, one needs not only to fill the field, but to fire a specific event, to which a js-handler is bound
I want to create a Form Input in a Web Page and have Custom Text Formatting Options like Bold, Italic and Adding HyperLink.
Pretty much similar to how asking a question in StackOverflow.
The primary purpose is to get the html output of what user enters in the form. For example, if user selects Bold Button and types something, i should get that part as
<b>Bold Content</b>
Need suggestions on how to achieve this.
Thanks
There are various ways to approach this, I'm going to tackle 2 fairly simple ones
The first thing to note is that you want to wrap your editor in a container element with the contenteditable attribute, then have an array variable, containing text strings and "events" of styling strings, encoded in whichever way you prefer (maybe strings starting with :, like ":bold").
What you don't want to do is directly store the html, but rather the states that can then be translated into html code.
Whenever the user writes, you'd capture the keystrokes (and prevent them from default behaviour) to add to the last text string (or add a new one in case the last was an event), and if the keystroke is, say, a backspace, then if the last item is an event, you remove all events on the tail of the array ( so [ "this ", ":bold", "is ", ":no-bold", ":italic", "text", ":no-italic", ":bold" ], which you'd later turn to "this is text ", would turn into [ "this", ":bold", "is", ":no-bold", ":italic", "tex" ])
Now you can do 2 major things.
Firstly, you can add a span for each text character, and assign the various classes based on the event styles so that each character has its own element:
<span class="">t</span><span class="">h</span>...<span class="bold">i</span><span class="bold">s</span><span class="bold"> </span><span class="italic">t</span>...
This is very slow for the browser to render, but will work quite well.
The other thing you can do, is evolving the previous example by working on each text string rather than each character, so you'd start a span for every transition from text to event in the array, assuming you're iterating over it, and add classes corresponding to the various types until you get a transition from event to text, in which case you insert the text, and close it before another event occurs, and simply repeat:
<span class="">this </span><span class="bold">is </span><span class="italic">text</span>
Much more concise and quite easy to get to. Alternatively you can add a <b> tag for every :bold event, a </b> for every :no-bold and similar. This is however highly discouraged. If you're missing it: in css you can have font-weight to describe boldness and other properties for italic and other styles
TinyMCE gives you all these features (and more) straight out of the box.
How to prevent the change of certain elements, tokens, within a textarea with javascript or jquery? For instance I have this string in an input
this is normal text {this can't be changed 1}. This is more text. {This can't be changed 2 }. And some more text
If a user tries to change text within the curly brackets I want to prevent that from happening.
I thought of finding the indexes of the start and stop indexes of the tokens and when a user tries to change an element, I would see if it falls within that range.
Is there a different approach that I can use?
You could use a regular expression to read everything between {} into an array when the page loads. Then when the form submits do that same thing again and compare them to make sure they are the same.
You should build a regular expression that validates the validity of the text. on every keydown event in the textarea revalidate the regex and notify the user / prevent the keypress.
As text can also be changes in other ways (paste, autocomplete, etc.) you should also validate on change event of the textarea.
I have a text field where a user inputs a value in the form of 2012-112233-123. I would like the dashes to be automatically added to the field as the input is entered.
I can implement a basic check on the keyup event that checks if the cursor is in the 5th or 12th position, but this causes issues when backspacing (dashes are re-added upon removal). If possible I would also like to ignore the user input if they decide to manually add the dash.
Is there an easy way of doing this, or a simple plugin I can use? Seems like a lot of code and checking for something that I would assume is a fairly common requirement.
Take a look at input masks.
This jQuery plugin looks good.
It allows you to do things such this:
jQuery(function($){
$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
There's even a callback available for when the input is filled.
I once used this plugin:
http://digitalbush.com/projects/masked-input-plugin/
for your need just define
$(".yourinput").mask("9999-999999-999");