Событие размытия полимерного элемента

Я пытаюсь понять, что легко сделать с полимером, и мне трудно заставить, казалось бы, простейшие события запускаться.

<polymer-element name="field" attributes=" type name value">
  <template>
    <label>{{name}}
      <input  type={{type}} name={{name}} value={{value}}>
    </label>
  </template>
  <script>
    Polymer('field', {
      onblur: function () {
        console.log('blurred');
      }
    })
  </script>
</polymer-element>

Я создал этот элемент и хочу что-то сделать с размытием. Кто-нибудь знает, что мне не хватает или где в документах я должен искать?


polymer
person Dan Baker    schedule 07.04.2014    source источник

Ответы (2)


arrow_upward
7
arrow_downward

  1. name="field" не соответствует Polymer('profile-field', но я предполагаю, что это какая-то опечатка.

  2. События blur не всплывают, поэтому размытие ввода не приведет к событию blur на вашем хост-элементе.

  3. лучше не переопределять функции on<event>, лучше использовать привязку событий Polymer.

Я не уверен, что это действительно то, что вам нужно, но вот пример, который прослушивает размытие на самом входе.

<polymer-element name="profile-field" attributes="type name value">
  <template>
    <label>{{name}}
      <input on-blur="{{inputBlur}}" type="{{type}}" name="{{name}}" value="{{value}}">
    </label>
  </template>
  <script>
    Polymer('profile-field', {
      inputBlur: function () {
        console.log('input blurred');
      }
    })
  </script>
</polymer-element>
person Scott Miles    schedule 07.04.2014
comment
Как ни странно, размытие и фокус всплывают при захвате quirksmode.org/blog/ archives/2008/04/delegating_the.html, хотя это может быть прервано shadowDOM, не знаю, как и не меняет правильность ответа, но стоит отметить как интересный. - person hobberwickey; 01.04.2015

arrow_upward
1
arrow_downward

Для меня в Polymer 1.9.1 событие blur не срабатывает, если обработчик определен с двусторонней привязкой. Итак, я использую определение on-blur="inputBlur" вместо on-blur="{{inputBlur}}" для события размытие.

<paper-input always-float-label
                         label="Some label"
                         required
                         type="number"
                         step="1"
                         min="0"
                         max="4000"
                         value="{{someValueProp}}"        
                         on-blur="inputBlur" 
                         readonly="[[readonly]]"></paper-input>

inputBlur: function () {
     //Some code inside
},
person Taras Pelenio    schedule 20.02.2019