Modify the textbox value during keydown AngularJs

Question

I have the following scenario as

my input text box will be having a text value assume it to be "sampletext" in lower case.

<input type="text" ng-model="txtValue" />

so when the user types s textbox value should be S

Again the user will type a so now text will be Sa and it should change as SA

simple words what he types it should turn into upper case before the next character he types.

I tried something like this in two different textbox as the below code

 Before
      <input type="text" ng-model="numberValue"/>

 After 
      <input type="text" ng-model="numberVal"/>

script controller as

$scope.$watch('numberValue',function(){
$scope.numberVal=parseInt($scope.numberValue).toUpperCase();

});

Also what if I need to separate them with example A => "A" Ab => "A","B" like this

Possible duplicate of [angularjs force uppercase in textbox](http://stackoverflow.com/questions/16388562/angularjs-force-uppercase-in-textbox) — Supradeep, Jan 05 '17 at 14:46
no!!! the answer of it does not shows the change, instead blindly accepts the character as upper case I want it to be explicitly visible — Aravind, Jan 05 '17 at 15:55
Ok. Check my answer below and let me know if that is what you are expecting. — Supradeep, Jan 05 '17 at 16:07
Is this just for presentation needs or do you want it also stored in the model upper-cased? — TSmith, Jan 05 '17 at 16:09
store the upper cased model in the same ng-model value. Also what if I need to separate them with example A => "A" Ab => "A","B" like this — Aravind, Jan 05 '17 at 16:10
@Aravind If you want to do such string manipulations , it's better to write that logic in a directive and use it as a component for any input box that needs this functionality. — Supradeep, Jan 07 '17 at 19:09

score 1 · Accepted Answer · answered Jan 05 '17 at 16:04

1

If you want a visible change, you can do like this : Fiddle

Html:

<div ng-app="myApp" ng-controller="Ctrl">
  <input type="text" ng-model="message" ng-change="toUpperCase()"/>
</div>

Controller :

angular.module("myApp", [])
  .controller('Ctrl', function ($scope, $timeout){
    $scope.toUpperCase = function (){
    $timeout(function (){
      $scope.message = $scope.message.toUpperCase();
    }, 100)
  }
});

answered Jan 05 '17 at 16:04

Supradeep

3,246
1
14
28

Increase the time in the `$timeout` function to see more visible change according to your requirement. Use the fiddle to decide that. – Supradeep Jan 05 '17 at 16:11

Modify the textbox value during keydown AngularJs

1 Answers1