Hello i want to submit my form when i press enter inside my text aera.

My textarea have an autoplete form created in a angularjs directive (autopleteAngularExpression)

I have try this :

<textarea ng-keyup="$event.keyCode == 13 && submit()" 
id="inputId" autoplete-angular-expression> 
</textaera>

The problem is that when i press enter in the autoplete of my textarea i submit the form.

How can i submit the form only if the autoplete form is showing ?

My directive is a little plex.

In the scope i have unparsed value

 directive('autopleteAngularExpression', ['_', '$', function(_, $) {

        function split(val) {
            return val.split( /\s+/ );
        }

        function extractLast(term) {
            return term.split(/[()-\s]+/).pop();
        }

        return {
            require: 'ngModel',
            scope: {
                indexed : "=indexedValue",
                nonIndexedValue : "=nonIndexedValue"
            },
            link: function(scope, element, attrs, ngModel) {

                function containsSomeIndexed(words) {
                    return _.some(words, function(word) {
                        return _.contains(scope.indexedValue, word);
                    });
                }

                ngModel.$parsers.unshift(function(expression) {
                    if (!expression || expression === "") {
                        ngModel.$setValidity('indexValid', true);
                    } else {
                        ngModel.$setValidity('indexValid', containsSomeIndexed(expression.split(/[()-:\s]+/)));
                    }
                    return expression;
                });

                element.autoplete({
                    minLength: 1,
                    source: function(request, response) {
                        var sourceList;
                        if (containsSomeIndexed(request.term.split(/[()-:\s]+/))) {
                            sourceList = _.union(scope.indexedValue, scope.nonIndexedValue);
                        } else {
                            sourceList = scope.indexedValue;
                        }
                        response($.ui.autoplete.filter(sourceList, extractLast(request.term)));
                    },
                    focus: function() {
                        return false;
                    },
                    select: function(event, ui) {
                        var selectedValue = ui.item.value;
                        var terms = split(this.value);
                        var partial = terms.pop();
                        var prependBuffer = "";
                        while (partial.charAt(0) === '(' || partial.charAt(0) === '-') {
                            prependBuffer = prependBuffer + partial.charAt(0);
                            partial = partial.substring(1, partial.length);
                        }
                        terms.push(prependBuffer + selectedValue);
                        return false;
                    }
              });
            }
        };
    }]).

Hello i want to submit my form when i press enter inside my text aera.

My textarea have an autoplete form created in a angularjs directive (autopleteAngularExpression)

I have try this :

<textarea ng-keyup="$event.keyCode == 13 && submit()" 
id="inputId" autoplete-angular-expression> 
</textaera>

The problem is that when i press enter in the autoplete of my textarea i submit the form.

How can i submit the form only if the autoplete form is showing ?

My directive is a little plex.

In the scope i have unparsed value

 directive('autopleteAngularExpression', ['_', '$', function(_, $) {

        function split(val) {
            return val.split( /\s+/ );
        }

        function extractLast(term) {
            return term.split(/[()-\s]+/).pop();
        }

        return {
            require: 'ngModel',
            scope: {
                indexed : "=indexedValue",
                nonIndexedValue : "=nonIndexedValue"
            },
            link: function(scope, element, attrs, ngModel) {

                function containsSomeIndexed(words) {
                    return _.some(words, function(word) {
                        return _.contains(scope.indexedValue, word);
                    });
                }

                ngModel.$parsers.unshift(function(expression) {
                    if (!expression || expression === "") {
                        ngModel.$setValidity('indexValid', true);
                    } else {
                        ngModel.$setValidity('indexValid', containsSomeIndexed(expression.split(/[()-:\s]+/)));
                    }
                    return expression;
                });

                element.autoplete({
                    minLength: 1,
                    source: function(request, response) {
                        var sourceList;
                        if (containsSomeIndexed(request.term.split(/[()-:\s]+/))) {
                            sourceList = _.union(scope.indexedValue, scope.nonIndexedValue);
                        } else {
                            sourceList = scope.indexedValue;
                        }
                        response($.ui.autoplete.filter(sourceList, extractLast(request.term)));
                    },
                    focus: function() {
                        return false;
                    },
                    select: function(event, ui) {
                        var selectedValue = ui.item.value;
                        var terms = split(this.value);
                        var partial = terms.pop();
                        var prependBuffer = "";
                        while (partial.charAt(0) === '(' || partial.charAt(0) === '-') {
                            prependBuffer = prependBuffer + partial.charAt(0);
                            partial = partial.substring(1, partial.length);
                        }
                        terms.push(prependBuffer + selectedValue);
                        return false;
                    }
              });
            }
        };
    }]).

• javascript
• angularjs
• forms
• autoplete
• angularjs-directive

• Hi, your question is a bit confusing. If you could revise it and make it clear what your issue is and what you want to achieve, that'll help people to answer your question. – Inspector Squirrel Commented Mar 4, 2015 at 10:24
• 1 Can you show the code for autopleteAngularExpression directive? – Vinay K Commented Mar 4, 2015 at 11:10
• Show the directive you created, maybe we will be able to modify it and the ng-enter directive to answer your requirement – Or Guz Commented Mar 4, 2015 at 13:27
• @OrGuz the autoplete directive is a little plex – brouille Commented Mar 4, 2015 at 13:50
• 1 @gregouille I would try to set a variable on the scope, which is true when the autopletelist is opened and change the if statement on ng-enter to if(e.which === 13 && isAutopleteOpened === false) – Or Guz Commented Mar 4, 2015 at 13:57

1 Answer 1

Instead of doing $event.keyCode == 13 each time write on directive ng-enter, that will do the trick for you.

Try

<textarea ng-enter="submit()" id="inputId" autoplete-angular-expression> </textaera>

Add this directive to get ngEnter

app.directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown", function(e) {
            if(e.which === 13) {
                scope.$apply(function(){
                    scope.$eval(attrs.ngEnter, {'e': e});
                });
                e.preventDefault();
            }
        });
    };
});

Reference Link