Question

您好我想找到一种方法来输入纸张输入自动大写。有人知道从哪里开始。写一个bahaviour是一个解决方案吗？

Answer 1

正如各位同志所说，没有mixins的CSS解决方案如果启用了阴影dom就不会工作，所以使用mixins的解决方案：

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

使用mixin - paper-input-container-input：：在输入上定义自定义样式：

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

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

Answer 2

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

行为当然是使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>

Answer 3

我无法让其他混合示例正常工作，但在挖掘source code on Github后，我得到了以下代码：

<custom-style>
  <style is="custom-style">
    paper-input.custom {
      --paper-input-container-shared-input-style: {
        text-transform: uppercase;
      };
    }
  </style>
</custom-style>
<div>
  <paper-input always-float-label class="custom" label="The label">
  </paper-input>
</div>

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

3 个答案: