Hi ich versuche einen Weg zu finden, einen Papier-Input-Auto-Großbuchstaben den Eingang zu haben. Weiß jemand, wo er anfangen soll. Ist das Schreiben eines Verhaltens eine Lösung?Polymer erzwingen eine Papiereingabe in Großbuchstaben
0
A
Antwort
0
Vielleicht ist der einfachste Weg, einen Beobachter zu haben, das wird oberen Fall der Eingangswert?
Ein Verhalten ist natürlich eine Option, um die toUpper
Funktion wiederverwendbar zu machen.
Polymer({
is: 'my-elem',
properties: {
value: {
type: String,
value: 'I will alwasy be upper case',
observer: 'toUpper'
}
},
toUpper: function(val) {
this.value = val.toUpperCase();
}
});
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-input/paper-input.html" rel="import"/>
</head>
<body>
<my-elem></my-elem>
<dom-module id="my-elem">
<template>
<paper-input value="{{value}}"></paper-input>
</template>
</dom-module>
</body>
</html>
1
Da die Commens haben die CSS-Lösung ohne Mixins angegeben wird nicht funktionieren, wenn Schatten dom so aktiviert ist, die Lösung Mixins mit:
<paper-input class="uppercase2"></paper-input>
Und eine benutzerdefinierte definieren Stil auf dem Eingang mit dem Mixin - Papier-Eingang-Container-Eingang::
<style is="custom-style">
paper-input.uppercase2 {
--paper-input-container-input: {
text-transform:uppercase;
}
}
</style>
können Sie sehen es in Laufen: https://jsfiddle.net/0u45v46e/5/
wird diese Lösung nicht mit Schatten DOM arbeiten. Es sei denn, Sie verwenden '/ deep /' das ist, was keine gute Idee ist –
Obwohl ich nicht shadow dom verwenden möchte, mit Mixins können Sie es mit CSS tun, finden Sie hier ein Beispiel: [mit und ohne Mixins ] (https://jsfiddle.net/0u45v46e/4/) – stp18
@ stp18 Ihr 'ohne mixin case' wird scheitern, wenn' shadow-dom' eingeschaltet ist, also warum es besser ist, Mixin zu verwenden – a1626