聚合物强制纸张输入为大写

嗨，我想要找到一种方法来让纸张输入自动输入大写。做一个人知道从哪里开始。正在写一个bahaviour一个溶剂？聚合物强制纸张输入为大写

2016-07-31 user2587790

也许最简单的方法是有一个观察者，这将大写输入值？

行为当然是使toUpper函数可重用的选项。

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>

来源

2016-07-31 13:34:32

由于commens都表示没有混入CSS的解决方案将无法工作，如果影子DOM被启用，因此，使用混入了解决方案：

<paper-input class="uppercase2"></paper-input>

，并定义自定义样式使用mixin输入- 纸张输入容器输入：：

<style is="custom-style"> 
    paper-input.uppercase2 { 
     --paper-input-container-input: {     
      text-transform:uppercase; 
     } 
    }  
</style>

你可以看到它在运行： https://jsfiddle.net/0u45v46e/5/

来源

2016-07-31 17:35:02 stp18

该解决方案将无法与暗影DOM工作。除非你使用'/ deep /'，这不是一个好主意 –

尽管我不喜欢使用shadow dom，但用mixins可以用CSS来完成，你可以在这里找到一个例子：[带和不带mixin ]（https://jsfiddle.net/0u45v46e/4/） – stp18

@ stp18如果启用了'shadow-dom'，那么'没有混入大小写'将会失败，也就是为什么它更好地使用mixin – a1626

聚合物强制纸张输入为大写

回答

相关问题