ember.js - Browser Autofill & databinding -


i have rather simple form has email , password input field. webpage google chrome's autofill/save password has activated. whenever load webpage, chrome autofills email , password field (which nice).

problem emberjs doesn't seem "see" these auto filled values. if use this.get('username') example in controller, ember returns me blank values.

in order have ember "see" these autofilled values, have click on each {{input}} or tab through them , ember begins see it.

it's simple form really:

<div> <form class="form-signin form-vertical" id="login-form" {{action "login" on="submit"}}>      <h3 class="form-signin-heading text-center sf-primary-color">please login</h3>      {{input class="form-control" name="email" placeholder="email address" value=username type="text" tabindex=1}}     {{input class="form-control" name="password" placeholder="password" value=password type="password" tabindex=2}}      {{#if errormessage}}         <div class="alert alert-danger text-center sf-fade-in">{{errormessage}}</div>     {{/if}}      <div class="well">         may login <kbd>demo</kbd>/<kbd>demo</kbd>.     </div>      {{input type="submit" value="log in" tabindex=3}}  </form> </div>

i have created fiddle well. problem not reproducible in fiddle, because no matter how many times i've run it. browser not offer save password.

it sound ember's data binding not detecting browser autofilled {{input}}

as aside, had use trick outlined here in order these input fields offer auto complete.

edit: defined observer below , not fired when site first loaded , auto fill has done it's job.

    usernamechanged: function() {         console.log('user name changed');     }.observes('username'),

version info follows:

debug: ------------------------------- ember.js:3461 debug: ember      : 1.4.0 ember.js:3461 debug: ember data : 1.0.0-beta.4 ember.js:3461 debug: handlebars : 1.3.0 ember.js:3461 debug: jquery     : 1.10.2 ember.js:3461 debug: -------------------------------

not perfect functional solution:

ember.textfield.reopen({    fetchautofilledvalue: function() {     var $textfield = this.$();     settimeout( function(){       $textfield.trigger("change")     }, 250);   }.on('didinsertelement')  });

Comments

Post a Comment

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

Image
i have page in each contest shown in row. each row contains contest id , link other model names have foreign key contest. news model: class news(models.model): title = models.charfield(max_length=50, null=true) description = models.textfield() time = models.timefield( default= datetime.datetime.now().time()) contest = models.foreignkey(contest) i want use admin adding , changing these models. want when user clicks on 'news' has foreign key contest id=1, shows list of news value foreign key. use {% instance in instances %} <tr class="{% cycle 'row1' 'row2' %}"> <td>{{ instance.title }}</td> <td>{{ instance.starttime }}</td> <td>{{ instance.timespan }}</td> <td>{{ instance.date }}</td> <td><a href="/adm...
Read more

android - Keyboard hides my half of edit-text and button below it even in scroll view -

i having trouble keyboard covers edit-text , half of button in scroll view. here's layout , please tell me how should resolve problem. many questions on topic none of them s working me. <?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="@drawable/bg" android:layout_height="match_parent"> <scrollview android:layout_width="match_parent" android:fillviewport="true" android:layout_height="match_parent"> <relativelayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <linearlayout android:layout_width="match_parent" android:layout_height="w...
Read more

css - Make div keyboard-scrollable in jQuery Mobile? -

from can tell, although jquery-mobile-powered pages can contain divs overflow set scroll or auto, , these divs can scrolled one-screen bar or mouse wheel, cannot scrolled using arrow keys, page-up/page-down, or home/end. instead, official "page" div (with data-role="page") absorbs input. perhaps other divs can't acquire focus, i'm not sure. is there way around this? edit: jsfiddle of simple example: https://jsfiddle.net/qogz0shx/ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"> </script> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/> <style> #outer { overflow:scroll; height: 50vh; width: 50vw; } #inner { height: 500vh; width: 500vw; } ...
Read more