无法将我的输入重点投入使用？

Question

为什么我的this.$.search.focus()不起作用？

＆＃13;

＆＃13;

<polymer-element name="site-search">
  <template>

<style>
  :host {
	font-family: 'RobotoDraft', sans-serif;
	font-size: 14px;
  }
  .condensed  input, .condensed /deep/ .underline {
    display: none;
  }
</style>

<section horizontal layout>
    <core-icon-button
      id="button"
      icon="search"
      title="search"
      aria-label="search"
      disabled?="{{!canBeCondensed}}"
      on-tap="{{toggleSearch}}">
    </core-icon-button>
	
    <paper-input-decorator flex
      label="{{label}}"
      floatingLabel="{{floatingLabel}}"
      value="{{value}}"
      disabled?="{{disabled || condensed}}"
      class="{{ {condensed: condensed} | tokenList }}">
        <input
          id="search"
          on-blur="{{onBlur}}"
          type="search"
          value="{{value}}"
          committedValue="{{committedValue}}"
          on-keyup="{{onKeyUp}}"
          disabled?="{{disabled}}">
    </paper-input-decorator>
</section>

  </template>

  <script>
Polymer({
  publish: {
    label: '',
    floatingLabel: false,
    disabled: {value: false, reflect: true},
    canBeCondensed: false,
    condensed: false,
    site: window.location.hostname
  },
  toggleSearch: function() {
    if (!this.canBeCondensed) return;
	this.$.search.focus()  <==== Doesn't work. Why?
    this.condensed = !this.condensed;
	this.$.button.hidden=true
  },
  onKeyUp: function(e) {
    if (e.keyCode == 13) {  // Enter.
      var q = encodeURIComponent('site:' + this.site + ' ' + this.value);
      window.open('https://www.google.com/search?q=' + q);
    }
  },
  onBlur:function(e) {
	this.condensed = !this.condensed;
    this.$.button.hidden=false
  },
});
  </script>

</polymer-element>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试删除css中的.condensed input,。

因为当您更改paper-input-decorator的类时，您原来的css也会更新内部input的类，这会导致input失去焦点。

或者，您可以移除整个class="{{ {condensed: condensed} | tokenList }}"并隐藏/显示js中的underline元素。例如 -

toggleSearch: function () {
    if (!this.canBeCondensed) return;
    this.$.search.focus();
    //this.condensed = !this.condensed;
    this.$.button.hidden = true;

    var underline = document.querySelector('paper-input-decorator::shadow .underline');
    underline.hidden = true;
},