點擊紙張輸入打開紙質對話框

我想從<paper-input>單擊打開<paper-dialog>，但我想忽略<paper-input>的浮動標籤上的點擊。我試圖禁用標籤的pointer-events，使用下面的CSS mixin，但它似乎沒有效果。我怎樣才能做到這一點？點擊紙張輸入打開紙質對話框

HTML模板：

<paper-input class="select" on-click="displayTimezone" 
    value="{{timeZone}}" 
    readonly 
    label="Select Time Zone"> 
    <iron-icon icon="expand-more" suffix></iron-icon> 
</paper-input> 
<paper-dialog id="timezoneDialog"></paper-dialog>

CSS混入：

paper-input { 
    --paper-input-container-label-focus { 
     pointer-events: none !important; 
    } 
}

來源

2017-09-16 Gurjit Singh

您可以使用paper-input-container。

<paper-input-container> 
    <label slot="label">Select Time Zone</label> 
    <iron-input slot="input" on-click="displayTimezone" bind-value="{{timeZone}}"> 
    <input> 
    </iron-input> 
    <iron-icon icon="expand-more" slot="suffix"></iron-icon> 
</paper-input-container>

要獲得材料設計，您可以用--paper-input-container-shared-input-style mixin進行設計。

<style> 
    :host { 
    display: block; 
    padding: 8px 0; 
    --paper-input-container-shared-input-style: { 
     position: relative; /* to make a stacking context */ 
     outline: none; 
     box-shadow: none; 
     padding: 0; 
     width: 100%; 
     max-width: 100%; 
     background: transparent; 
     border: none; 
     color: var(--paper-input-container-input-color, var(--primary-text-color)); 
     -webkit-appearance: none; 
     text-align: inherit; 
     vertical-align: bottom; 
     @apply --paper-font-subhead; 
    }; 
    @apply --paper-input-container; 

    } 
    input { border:none; width: 100%;} 
    input:focus { outline: none;} 
</style>

來源

2017-09-17 04:33:46 Ofisora

您可以檢查event target只處理從內<input>點擊（忽略點擊從標籤或下劃線）：

displayTimezone: function(e) { 
    // open dialog only for <input> clicks 
    if (e.target.localName === 'input') { 
    this.$.timezoneDialog.open(); 
    } 
}

demo

來源

2017-09-18 01:24:48 tony19

點擊紙張輸入打開紙質對話框

回答

相關問題