I would like every character entered into my HTML input box to get uppercased. Here's the approach I am trying using the latest Alpine.js available via CDN.
<input
x-data="{myText: '' }"
x-text="myText" type="text"
#keydown="myText.toUpperCase();"
name="myText"
placeholder="Some Text"/>
This seems to have zero effect. What's the right way of doing solving this problem?
There are a couple of things going on. First of all, you're binding to keydown but not assigning your uppercased value to any reactive property. Second is that you probably want to use x-bind:value.
<input
x-data="{myText: '' }"
type="text"
#keyup="myText = $event.target.value.toUpperCase()"
:value="myText"
name="myText"
placeholder="Some Text"/>
Related
I have a little challenge when testing a website. Just wanted to see if you folks have any suggestions on this. The story behind this is that I need to mask the input fields for the screenshots when the test has been executed as we are sharing the data with other teams. Before the script I am running JS with 'document***.type="password";', but when script starts to type, then input type is changed back to the type of text. Also, class changes from class="is-invalid" to class="is-focused is-invalid" when it's active. Also, I could of course change the type after I have typed the value, but even tho when I click the next field, the class changes. When I have filled the first input field it checks the data against the server and the class is of course changed.
I have an input field when inactive:
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-invalid">
And the input field when active"
<input ref="input" value="input field" id="id-for-unified-text-input--14fe" name="unified-text-input-14fe" type="text" autocomplete="off" spellcheck="false" placeholder="ABC123" class="is-focused is-invalid">
Any suggestions from a fellow testers, how could I fix this? Thanks a lot in advance!
As pretty much evident from the HTML the <input> field whenever recieves the focus_ the classname is-focused added.
This addition of classname is pretty much controled through the attributes, presumably the css_properties of the parent elements.
As as conclusion, it would be difficult to mask the password field characters from the clientside and have to be controled from the Application Server side.
I am quite good in jQuery, but Angular is not (yet!) one of my strongest skills. I have the below JSFiddle in jQuery, but now it turns out I can't use jQuery, so I am forced to use Angular.
http://jsfiddle.net/eAt6Q/1/
What I want to do, is to show a button after typing something in an input field and removing it when the input field is blank (so at the initial state or when backspacing and there is no letter left), just like in the example.
How would I do this? How do I bind a button to a keypress, because I am struggling to find that out.
I have tried something like this:
<input type="text" id="testInput" />
<button ng-if="testInput.length"></button>
<input type="text" id="testInput" />
<button ng-hide="testInput.length"></button>
But this is not working and I know for sure I am doing something wrong.
ng-model is all you need in angular
<input type="text" id="testInput" ng-model="testInput" />
<button ng-show="testInput !== null "></button>
You can use ng-blur for more actions
you can use ng-show or ng-if both to hide the button but ng-if more suitable to hide button from dom
<input type="text" id="testInput" ng-model="testInput" />
<button ng-if="testInput !== null || testInput.length > 0"></button>
or you can also use ng-disabled to disabled the button without hide.
I've got two input fields of type number. I want second to have minimum attribute dependant on first field. I can dynamically change the attribute, but ng-valid does not change, when value is lower than minimum.
jsfiddle code example: http://jsfiddle.net/NBhn4/87/
Is that a bug or am I doing something wrong?
I found this: https://github.com/angular/angular.js/issues/2404. It seems to suggest, that the problem was fixed. In my jsfiddle example I am using angular 1.3.5 and it's still not working.
<input type="number" ng-model="max" min={{min}} name='max'>
Using this, changes the minimum, but ng-valid seems not be be triggered after change.
Its your angularjs version problem I hope. Use latest versions of angularjs and this code is working.
<form name="form" novalidate ng-init="min=1;number=0">
Number:
<input type="number" ng-model="number" name="number" min="{{min}}">
<div style="color: red" ng-show="form.number.$error.min">Number must be at least {{min}}</div><br>
Minimum:
<input type="number" ng-model="min" name="min">
</form>
I want to only set my attribute of ng-minlength when the value I parse from data.Validation['minlength'] is not nil.
First I attempted using ng-switch; I had no problem doing this when handling ng-show=true/false. However I was unable to get it working when it was beyond just the value but also the whole declaration of ng-minlength="...". Second attempt was using ng-if but again I was unable to get it working in the "middle" of the input.
Below is some code that works - I want the whole ng-minlength="data.Validation['minlength']" to only be set if the value is not nil.
<input type="text" name="foo" ng-model="item.foo"
ng-minlength="data.Validation['minlength']" required/>
I discovered a simpler approach in another question of mine.
Solution by Karaxuna here.
<input type="text" name="foo" ng-minlength="myvar || 0" required/>
You can try ng-switch-on
<span ng-switch on="data.Validation>
<input ng-switch-when="null" type="text" name="foo" ng-model="item.foo" ng-minlength="data.Validation['minlength']" required/>
<input ng-switch-default type="text" name="foo" ng-model="item.foo" required/>
</span>
It will create input depending on data.Validation values
However I am not sure if it will work with NULL values. It is still a good way forward.
I was wondering if someone knows what controls the showing of previous form field entries in a form.
So for example, if in the name field, I go to type 'John' it appears below the field. Is that a feature of the browser or is it javascript or something?
Also, if it is the browser, is there a way I can turn this off for a given form?
You might be looking at autocomplete, if so turn it off with autocomplete="off" within the HTML of the relevant field:
<input type="text" name="firstname" autocomplete="off" />
References:
input element.
It's made by the browser, if you're working with HTML5 you can set a attribute to the input-element to remove it.
<input type="text" autocomplete="off" />