I have an input inside my form, it holds a value price of a product,
at the beginning the input text placeholder is '$':
<input [placeholder]="$"/>
Now when ever I write something I want the '$' letter of the place holder to move with the cursor but inside the place holder and not as a text, for example when I write 123 it will show it like this 123$, what I did is at each change inside the input I add the letter '$' at the end of the input text but that it's not practical, I want it the letter '$' to be as a placeholder in the background and not part of the actual price.
Any help is appreciated.
Seems to me you'd create a filter (or a "pipe" in Angular 2 parlance). Your scope value can be modified in the view using a template without changing the original value.
https://angular.io/docs/ts/latest/guide/pipes.html
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value and disapear as soon as the user enters a value.
What you want to do is to format the value that can't be achived with placehoder.
I'll go with a directive allowing you to configure the currency to display and where to display it. Just like TestMask Lib
Since the "$" symbol is not meant to be part of the text and is used for guidance for the user, wouldn't you be better of implement this as something like:
<label>$</label><input type="text" placeholder="Enter value in USD" />
This way the $ will remain constant in front of the entered value.
Related
I want to format a number from 10000 to 10,000.00 is there any way to do it in HTML alone(without controller file) with ng-Model directive?
I tried to do it in controller file with a logic and bind it to HTML file. But the controller logic always return a number in "10,000.00" String format. Is there any way to convert "10,000.00"(String) to 10,000.00 (number) and bind it to HTML?...(I want 10,000.00 in type number).
My .html file is something like this
div ng-repeat="array in arrayList"><input type="text" ng-Model="array.amount" </div
and my controller file is something like this
var arrayList=[{"amount":3000},{"amount":4000},{"amount":5000}];
(I apologize for not formatting the html file properly)
Thanks
Explanation:
Use type="text" and pattern validation like
pattern="[0-9]+([\.,][0-9]+)*" to limit what the user may enter while
automatically formatting the value as you do in your example.
Put an overlay on top of the input field that renders the numbers how
you want and still allows the user to use the custom type="number"
input controls, like demonstrated here.
The latter solution uses an additional <label> tag that contains the current value and is hidden via CSS when you focus the input field.
In input type: "number" case ngModel type is number and in input type:"text", ngModel is string
Demo of one use-case: JSFiddle
I'm building a form using React and Material UI. I'm supposed to add a helper, when the user is starts typing in the Text input field. What is property which I could use ? The helper should not be displayed when moved to next text input field
If you want to have that on a Textfield there is a helperText prop that you can use to show some information useful information to the user. Take a look at the docs and give it a shot.
You can use the input value to know if the user has typed something and show this helperText conditionally, I'm not sure if I understood what you wanted but I'm guessing it goes this way.
I've added here a sample of a helperText showing only when the user is typing https://codesandbox.io/s/material-demo-supmg?fontsize=14
I want to autopopulate a form element/field value instantly on the basis of another form field value using javascript.
As shown in the figure, if a user fills the choice as "A" then the 'filled' field must automatically be filled with B without refreshing.
Thanks in advance for help :)
Here is a screenshot of how I want it to look:
From what I understand; When a user writes 'A', a javascript should run and put 'B' in the other field.
If so, in my following code, I first placed an onchange function, meaning it will only run when the user clicks away from the textbox (You can instead use an onsubmit and a submit button, I just used this to avoide using a form). It will call the function "autofill()". autofill() has 3 lines of code, the first will search the document for an id "field1" and gets its value and saves it as variable x. The second will compare that to a hard coded character 'A', if it equals A it will then move to the third line where it will place 'B' in the second field with id "field2".
HTML:
<input type='text' id='field1' onchange="autofill()">
<input type='text' id='field2'>
Javascript:
function autofill(){
var x = document.getElementById('field1').value;
if(x=='A')
{
document.getElementById('field2').value= 'B';
}
}
You can create multiple 'if' statments to check for other characters, or remove the if statment all together if you want it to show 'B' regardless!
Hope this helped, and don't forget to "check" the right answer!
I found it really hard to come up with a question title for this one so I apologise that it's fairly cryptic but I'll try explain better there.
Basically part of an app I'm developing involves placing 'placeholders' in a textarea and then modifying those placeholders outside of the textarea.
For example:
This is the <first> placeholder. This is the <second> placeholder.
This is the <first> placeholder again.
Basically i have JS that detects these placeholders and creates input boxes to hold the text. So there would be an input text box for first and one for second.
What I want to achieve is when I type a value into the textbox it changes the placeholder in the textarea to the content being typed into the textbox. Think sublime text editor's snippets for a textarea.
I'm trying to figure out how I can track the placeholders in the text area. For example if a placeholder was <first_name> and i started typing into the placeholders textbox 'Billy'. I could easily change the placeholder by using a string replace function. However now the placeholder <first_name> doesn't exist in the textarea and so now I can't go back and change it. I need to have a way of tracking these placeholders whilst they are changing.
I hope that makes sense.
If you're not bound to a <textarea> element, you can try with a simple div with the attribute contenteditable="true". This way you can use some <span> to mark all the placeholders.
I set up a demo on jsfiddle, try it.
Using an element with contenteditable="true" would be easier for that task, because you could represent placeholders as span elements and you would then only have to retrieve them by id or any other unique attribute to update their content.
If you have to use a textarea and the users can only modify it's content using external inputs, maybe you could initially track the index of each placeholers and their length and keep those synchronized as values are changed.
You could then easily replace content in the textarea. For example, if the placeholder starts at 15 and has a length of 13.
var string = 'this is a test {placeholder} bla bla bla',
placeHolderIndex = 15,
placeHolderLength = 13;
string =
string.substring(0, placeHolderIndex)
+ 'new value'
+ string.substring(placeHolderIndex + placeHolderLength);
//update indexes of every placeholders that comes after this
//one and update the content length of this placeholder.
Obviously, you don't want to hardcode any values and you will want to handle this process in a dynamic way, but that's just an example.
NOTE: I guess users can modify the textarea content if you're using one. In that case, it would make things a bit more complicated, because you would have to update the index of the placeholders for every modifications the user does and you would also have to prevent them from editing the placeholders-mapped text directly.
Is it possible to show and initial text in in a dijit.form.FilteringSelect wich is not an value. For example the search box on http://docs.dojocampus.org displayes the value "search" when it is not being used.
I have tried using select.attr( "displayedValue", "My initial text" ) but becuase it is not an actual value the box will be marked as if it contains an invalid selection.
I see an open enhancement for your question :: http://bugs.dojotoolkit.org/ticket/3286