add text to an input type email angular jquery

Question

I am trying to add text to input type email without success here is how I am trying to do it

 $scope.lastFocused;
  angular.element("input[type='text'], input[type='url'], input[type='email'], input[type='password'], input[type='search'], input[type='tel'], textarea").focus(function() {

    $scope.lastFocused = document.activeElement;
  });

  $scope.insertText = function(text) {
    var input = $scope.lastFocused;
    console.log(input);
    if (input == undefined) { return; }
    var scrollPos = input.scrollTop;
    var pos = input.selectionStart;
    var front = (input.value).substring(0, pos);  
    var back = (input.value).substring(pos, input.value.length); 
    input.value = front+text+back;
    pos = pos + text.length;

    input.scrollTop = scrollPos;
    console.log(angular.element(input).val());
    angular.element(input).trigger('input');

 };

I think the problem has to do with the fact that I am trying to trigger an input of type text and email does not support input.selectionStart;. I get the error

Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('email') does not support selection.

and for some reason email will not accept a value.

I am using chrome only. any workarounds would be apreciated

sorry I know its not the full code – Aaron Rabinowitz Aug 25 '16 at 18:55 — Aaron Rabinowitz, Aug 25 '16 at 18:55

score 1 · Answer 1 · answered Aug 29 '16 at 16:59

1

I don't understand what you are trying to achieve. Still, I think you wish to change type attribute of input directive.

You can achieve it using only angular, as follows : <input type={{foo.bar}}>

Later on in your controller change the value of $scope.foo.bar accordingly.

Also, anything between {{}} is an expression, it could evaluate to anything.

PS: Using Jquery along with AngularJS is kind of redundant and isn't considered a good practice.

answered Aug 29 '16 at 16:59

Prateek Gupta

538
2
10

Thank you for your time unfortunately this is a chrome extension therefore you cannot really change the elements on the site (you can but it will be to cumbersome to connect it again to the scope) I will give you a vote because it is possible to change the type angular comes with a jquery lite but it didn't have all the features that I needed. – Aaron Rabinowitz Aug 29 '16 at 17:28

score 1 · Accepted Answer · edited May 23 '17 at 12:14

1

Here is a link to the answer of another post with the same exact type of question as you:

https://stackoverflow.com/a/21959157/6032583

It looks like you are going to need to find another way because 'selectionStart' is not supported by an input of type email.

edited May 23 '17 at 12:14

Community

1
1

answered Aug 29 '16 at 17:00

Josh Yolles

108
1
8

Thanks I didn't realize what the real problem was till afterwards thank you – Aaron Rabinowitz Aug 29 '16 at 17:25

add text to an input type email angular jquery

2 Answers2