How to input decimal value in core-range, as in given demo?
With 'step' attribute added:
<core-range step="0.5" min="0" max="200" value="{{value}}" ratio="{{ratio}}"></core-range>
I can paste decimal(e.g. 5.5) in the input field but cannot type it?!
That's pretty interesting. I think it's a bug in the core-range element itself (https://github.com/Polymer/core-range/blob/master/core-range.html). As the input gets validated "5." gets overwritten by the number 5 and set as value. Since it is reflected in the input field itself, the input changes to 5. When you paste it in as a whole, the "5.5" stays and is reflected in the input field. That's why it works when you paste it. I don't think there's a work around other than fixing the bug.
Issue opened:
https://github.com/Polymer/core-range/issues/2
Related
Have a look at the following screenshot. You can see that the text input field is empty, yet its value attribute is set to "b".
You'll also notice in the Properties tab, under input, that value here is set to "". Why are they different? What does this mean?
Could this be related to the fact that the input was rendered by React?
If it helps, here is the jsx responsible for this element (redacted):
return (
<td
key={field._id}
className={`oldField ${colPos}`}
>
<input
type="text"
defaultValue={value}
onChange={this.changeOldField(record, field)}
/>
</td>
)
It seems that you are changing the defaultValue based on something from the state. The defaultValue prop should be set only once and not changed later on, because any more changes will be ignored by React. If you want to change the value based on state you should use the normal value prop. Otherwise, if you want a predefined value to appear to the user and at the same time control the input when it gets changed, you can either use some logic in your code that handles both onChange and the code in your component that wants to automatically change the value, or possibly place it in the placeholder prop, which will give you something like what you want.
Very easy question but too much confused about whats the scope of input type='number' field.
Actually working on forms found error during validation of the form.
<input type="number" placeholder="Demo Number Field" class="form-control" [(ngModel)]="demoNumber">
{{demoNumber}}
<input type="text" placeholder="Demo Text Field" class="form-control" [(ngModel)]="demoText">
{{demoText}}
When I load the page for the first time these input fields have values of null but whenever I fill those fields once and then delete all contents from both fields, the value of Textfield is null but the value of numberfield remains NAN instead of null. Why is this so? Due to this, the form is valid even if number field is empty (after removing content) which is wrong. How can I fix this?
One more thing - why does numberfield accept some characters like e but not all characters like d,f,r, etc.?
here is plnkr which i have used for demo purpose
Plunker code
PS :- Is there any way to restrict user not to allow e or something else in the number field ?
Edit:: chrome accepts e, firefox also accepts e. because e can exist in the form of 1.1e+10.
However firefox does't allow e if its in invalid formats like, e or 1e etc. Firefox allows if its in valid format like 1.1e+10.
Original answer:
After the edit and making the text box empty, scope of text field is set to empty string, not null.
Same way, scope of number field is set to empty string. When you try to render it, you will get NaN.
For your second question, I have tried in firefox and it is not accepting any characters like e, f, r etc. They are being shown in red color.
I am using the djFilteringSelect control to show values in a dropdown as user type a value.
The lookup and typehead is working fine. The user type a letter and the dropdown allow the user to select a value which is then displayed in the dropdown field.
If the user now decide to remove the value first selected so that the combobox is empty and leave the field, then the first value in the list is now automatically filled in.
The consequence of this is that if the user have added a value there is no way to remove the value and leave the box emtpy.
I am using required=false for both the control and the dojo attribute but it does not seem to help. There are also a few other djFilteringSelect attributes I have tried like "Autocomplete" and "trim" but it does not work
Here is the code
<xe:djFilteringSelect id="test" type="select" store="jsondata" searchAttr="data" required="false" labelType="html" invalidMessage="Not valid">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="required" value="false"></xp:dojoAttribute>
</xe:this.dojoAttributes>
</xe:djFilteringSelect>
Initally the field is not required, but if the user have entered a value it is required.
My question is if there a way to prevent the djFilteringSelect control to always populate the field if I have previously added a value
I found someone who solved this in another stack overflow topic, by creating an empty entry in my data store. but I could not get this to work
Dojo: Select of empty value for FilteringSelect while required=false
I do this quite a lot. Right now I don't have a working sample to show you (since I moved to bootstrap - and have to code the selects by manually adding select2 controls) but something like this should do it...
I add an "empty" value at the top of my select - and that seems to work no matter whether I am using a combobox, djCombobox or combobox with select2 from bootstrap. My markup typically looks like:
<xp:comboBox id="inputLocationSelector" value="#{User.catchListType}" disableClientSideValidation="true">
<xp:selectItem itemLabel="(none)" itemValue=""></xp:selectItem>
<xp:selectItems>
<xp:this.value><![CDATA[${Configuration.meta.listLocationTypeOptions}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
Then you could specify "(none)", "All" or " " for the "not-selected" value depending on your needs.
Validation is a different thing so just specifying "required=false" does not give you the "empty" value.
/John
In my HTML markup I have an input of type text which has a two-way binding (using ng-model) to a decimal property. The object which contains this decimal property is fetched using a Breeze query on the client side. I can see that the Breeze query has successfully fetched the data and can see the initial value of the property (i.e. 1.25) in the text input. If I delete the decimal point and try to type it in again it will not allow me to do so and at this point I can only type in a number - effectively what I end up with is an integer value.
Can anyone tell me if Angular or Breeze is doing something behind the scenes that is limiting a text input to only being able to accept numbers instead of any text. I've inspected the input element in question in the browser to see if anything extra was "bolted on" that may have caused this but nothing jumps out. The "fix" or workaround would be change the input type to number and set the step attribute to "any" but nevertheless I would still like to understand the cause so any help will be greatly appreciated.
Thanks
I'm having the same issue and I think the problem is that due to the two-way binding the value is expected to be valid at any given moment. Apparently "1." is not a valid number so it doesn't like it. If you type "125" and then go back and insert the "." it will accept "1.25".
My current solution is to use debounced updates:
<input type="{{type}}" ng-model="ngModel" ng-model-options="{ updateOn: 'default blur', debounce: { default: 1000, blur: 0 } }">
If you do not want timeouts at all you could use just:
ng-model-options="{ updateOn: 'blur' }
More on this here: https://docs.angularjs.org/api/ng/directive/ngModelOptions
Depending on your localization settings, the numeric input field may accept only numbers and commas (not decimal points). As the validation is done on unser input, angular is able to set the value with the decimal point without failing.
By the way, why would you want to use breeze, when AngularJS has all you need to link your fields to the model?
In Chrome, I noticed that undo does not work properly for input element after the contents of the element has been changed programmatically. Although I get different behaviours for different browsers, they're not as bad as Chrome.
FF20 good
IE9 some support (undo stack cleared when input loses focus)
Safari5 some support (undo stack cleared when input loses focus)
Chrome26 unreliable
For example, a script that trims spaces (see also jsfiddle below)
type some spaces before "hello!",
click outside the input element
click on the input element and press Ctrl-Z
now the text is gone (in Chome)
jsfiddle here
<input type="text" id="input1" value="hello!">
document.getElementById("input1").addEventListener('blur', function(evt){elementLosesFocus(evt, this);}, false);
function elementLosesFocus(evt, caller)
{
caller.value = caller.value.trim();
}
I think the best thing I can hope for is a method to somehow clear the undo history of the input when it loses focus (as is the case with IE and Safari).
Chrome doesn't store the field's states, but rather a diff or set of deltas for each undo/redo. It takes less memory, but causes the bug you're dealing with.
You can effectively simulate the user pasting a value into the field by using document.execCommand("insertText", false, "text to insert");.
For your particular case:
First, save the field's value to a variable. var temp = caller.value;
Next, clear the field's value or set its selectionStart to 0 and selectionEnd to the field's length. This way a simulated paste replaces the field's contents.
Next, make sure the field has the focus. caller.focus();
Finally, simulate the user pasting in the modified value. document.execCommand("insertText", false, temp.trim());
I found this solution in another SO question, https://stackoverflow.com/a/10345596/1021426