I'm aware that parsing numbers with pure CSS is impossible. But as in my case I know for certain that the input will always be in a specific way, is it possible to change the display of an input field based on the count of characters in it?
e.G. I want '123450' to be displayed as '1,234.50' - or if it were 'abcdef' it should become 'a,bcd.ef'.
So, I would like a rule that says: from right to left: after the second char display a dot, after the fifth and eight char display a comma.
Is that possible?
Example:
<input type="text" class="unformatted" value="123456" />
Should display like
<input type="text" class="formatted" vaulue="1,234.56" />
while still retaining its original value 123456.
What you're asking is not possible with pure CSS. The smallest you can go with CSS is the single HTML tag, you cannot go deeper than that.
Individual lines of text cannot be selected or altered, as they are seen as a whole by CSS engine.
With a little help from JavaScript, however, this can be easily done.
Related
It is obvious, that consecutive whitespaces are rendered as one space in HTML. But why does this apply to the value attribute of hidden input fields ? And how to overcome this problem ?
E.g. the markup <input type="hidden" name="var" value="a b"> will result in the value being a b (with only one space).
Note : I'm using PrestaShop.
Edit: The problem was the following: Prestashop has an option Advanced Parameters - Performance - Combine, compress and cache - Minify HTML, that represents multiple whitespaces as one, even in attribute values. It can be considered a bug, since multiple whitespaces are significatif in html attributes.
Normal space (not non breaking space or ) is , you should be able to add double spaces with it.
Unicode-Table
Not sure if this works, but have you tried instead of a normal space?
I want to use the number input type for my HTML form.
Unfortunately it only accepts real numbers, no dashes between.
Is there a way to make the number input accepting numbers like "1234-123456789" ?
I recently had the same issue. I got around it by using type="tel" instead of type="text" or type="number". By using 'tel' I was able to get a numeric only keyboard on mobile devices and still be able to use my pattern="[0-9\-]+".
Here is the code I used. I hope this is good enough for what you need. They really need to make it so that adding a pattern attribute overrides any built in pattern set by the type attribute.
<input id='zipcode' name='zipcode' type='tel' pattern="[0-9\-]+" placeholder='Zip-code'>
Of course this will only work if all you want is dashes and possibly parentheses.
You can use a regular expression against which the value will be validated. Simply put it in the pattern attribute. You also have to change your input's type to text in order to use that.
<input type="text" pattern="[0-9]+([-\,][0-9]+)?" name="my-num"
title="The number input must start with a number and use either dash or a comma."/>
inputmode="numeric" is your new best friend..
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/#numeric
Is it possible to change the default content of this element: (Using Google Chrome)
<input type="month"/>
To make it, for instance, a blank field (default display)?
I don't believe it's possible to make the input field entirely blank, that is without the hyphens.
Is it possible to change the default content...
You can, however, change the default date shown through the value attribute:
<input type="month" value="1963-12" />
This will display December, 1963 (oh what a night...)
Note that the month must be two characters, 0 padded for less than 10.
I would suggest reading up on the other attributes that let you customize the field further.
If you really want to show an entirely blank field, I would suggest using a blank input tag and writing your own functionality to style and format the date within it.
Im not sure on how to explain this but, what I want to know is there if there is any way to "lock" just one part of an text area in a html form. Example:
<input name="example" type="text" id="example" valeu="__this part cant be modified__, and here user insert aditional info" />
And then I get this field value as like: "this part cant be modified + what user typed"
Thank you
I don't think you can, your best bet would probably to just append your default value to their input upon submission.
No, there isn’t, not for input elements, not for textarea elements.
You can however create an impression of such behavior, e.g. having some text and an input element on the same line and setting their style as similar as possible (setting all text, background, and border properties). Of course, the form data would still consist of the input value. And prepending the fixed text to it in client-side JavaScript would be possible but normally pointless, since it would be inherently unreliable and since you can simply make the form handler behave as if it got that string (i.e., make it have it as built-in data).
I would like to fill the space between html attributes regularly in order to simplify editing in block mode.
Example:
<p><input type="a" name="a" value="foo a"></p>
<p><input type="ab" name="ab" value="ab bar"></p>
<p><input type="abc" name="abc" value="baz abc"></p>
Select the three inputs in visual block mode and do some magic.
Output:
<p><input type="a" name="a" value="foo a" ></p>
<p><input type="ab" name="ab" value="ab bar" ></p>
<p><input type="abc" name="abc" value="baz abc"></p>
(Preferably without filling out the spaces between values.)
How do I do that?
Edit: And a way back (after editing) would be nice, too.
You can do this with the Align plugin:
:AlignCtrl mIp1P0=l
:Align \i\+=
or build a mapping with it:
map <unique> <SID>WS <Plug>AlignMapsWrapperStart
nmap <unique> <SID>WE <Plug>AlignMapsWrapperEnd
map <silent> <script> <Leader>aa <SID>WS:AlignCtrl mIp1P0=l<CR><CR>:'a,'zAlign \i\+\s*=<CR><SID>WE
There's also an alternative to Align called Tabularize.
You can use an external tool for that, I use astyle for my C/C++ coding, to make it automatic I inserted the following in my ~/.vimrc file:
if filereadable("/usr/bin/astyle")
silent! %!astyle
endif
You can search for Tidy if it meets your needs.
Obs.: With :%! you pass all the code to the external tool "!, for specific selection '<,'>! should be used.
Now you can map a shortcut to this command.
If there only one space between attributes you can make that :
:s/"\s/"\t/g
You can see more here.
What kind of edits are you doing in block mode? There is probably an easier way to edit.
Here's an example:
removing type="*":
linewise visually select the block (i.e V})
type :norm WdW
explanation:
When you type : with a visual selection, you should see :'<,'> in the command line. This means do the following command on just the selection
:norm means interpret the following characters in normal mode
W jumps to the beginning of the next Word
dW deletes until the beginning of the following Word
I did have to align words as you describe once for a specific case where it was preferred for readability (it's usually frowned upon). I ended up doing a quick hack to get the job done. In your case, it would look like:
(select block)
:'<,'>s/ / /g
(go to first space after "input")
(note the column number in the lower right (10))
gv (reselect block)
:norm 10ldw (delete
(go to first space after "abc" (because this is the longest value for this column))
(note the column number (21))
:norm 21ldw
... and so on
If you just want to delete a column, you could just convert 1 space into many, block select the column including some empty spaces on each side, delete, and convert many spaces back to one.
As I said before, this method is very fragile and only possible when spaces are only used to delimit columns. Instead of using :norm on a block, you can also consider making macros or trying to accomplish your editing tasks with find and replace