How to change the keyboard "return" button to a "done" button

ionic-v1
1

I have a content editable element that the user can click on to bring up the keyboard to edit. However, there is a return button on the keyboard rather than a done button. I want that to be a done button that simply closes the keyboard, rather than a return button that adds a line break or submits the form.

Is there an easy way to do this? Or should I set up a directive that montiors for a return key click and then disables/blurs the element? I’ve bound an ng-keyup event so far with some problems.

<span contenteditable="true" class="blanks" ng-blur="blurredWhy($event)" ng-focus="focusedWhy($event)" ng-bind="data.why" ng-keyup="disableReturnButton($event)"></span>
2

Wrap the div in a form. This will change the return button.

3

Is is recommended that every input field has an enclosing form tag to allow ionic to do it’s keyboard processing etc. correctly?

Is there a link that would list the differences in behaviour for each?

4

I wrapped the div in a form tag, but it didn’t seem to change anything since it is a contenteditable field rather than an input box.

Additionally, even if it was an input box and it’s wrapped in a form tag, the button changes to “Go” and not “Done” which submits the form instead of just closing the keyboard.

My solution has been to disable the return button onkeyup for that element
e.g. ng-keyup=“disableReturnButton($event)” … but I think I might be doing it wrong… is it attaching a document onkeyup function globally to the document? I’d rather have it scoped to only be active for that particular element, controller, view, etc…

 $scope.disableReturnButton = function($event){
    document.onkeyup=function(e) {

        if(e.which == 13){

          $event.target.blur();
          return false;
        }
    }
  }

however if I change it be bound to the ng-keyup event of the element itself, I get an error where calling blur doesn’t trigger the ng-blur event on the element… but does correctly blur the element.

  $scope.disableReturnButton = function($event){

    if($event.which == 13){
      $event.target.blur();// this blurs the element but doesn't trigger the ng-blur
      return false;
    }

  }
5

That’s where the trouble is. It needs to be an input or textfield. Also note that it doesn’t seem possible to set the keyboard button to done in html, only ‘return’ or ‘go’.

As for hiding the keyboard when you press the return button, I have this example app to show this

Basically there is a directive that allows you to catch events on inputs (but it can be changed) so that you can do stuff like on-return="somthingCool()"

@mrsean2k You should be wrapping all your inputs with a form if they’re getting submitted to something. Just think of how it would be done on a website.

6

@mhartington there’s no standard submission at all in my app in the standard form post / get sense: the input fields are purely used to populated local scope, and then that data is submitted elsewhere in the process via a service.

I ask the question in case there’s some CSS styling or processing that ionic does in the UI that tests to see / requires that input fields are always descendants of a form (or if there’s anything in the webview component that behaves differently)

7

Ah alright, no then for that, you should be good.