3

我想让 Materialize.css 卡片在双击时可编辑。为此，我将输入放在卡片 div 中，而不是 p。

div.row
each cards
  div.col.m4.s12
    div.card.teal
      div.card-content.white-text
        if openCard
          //input(type='text' value='#{text}')              
          textarea.materialize-textarea #{text}
        else                   
          p #{text}

问题是输入（和文本区域）元素具有广泛的材料设计样式，包括输入下方的线条。在其他场合它看起来很整洁，但在卡片内部则完全没有必要。

有没有办法从输入元素中删除样式，所以它可以在这种双击编辑模式下使用？

或者也许还有其他解决方案，如何通过双击卡片进行编辑，而不涉及重用以前样式的元素？

ps 我在 Meteor 中运行它，并且有 Jade 预处理器。但是，这些事实不应影响问题或答案。

4

4 回答 4

4

只需将 class : 添加browser-default到您的元素

于 2017-07-12T14:53:16.493 回答
0

如果双击对于其他功能不是必需的，您可以通过删除双击和 textarea 来优化，只留下 <p> 并添加属性contentEditable ="true"。还使用 onBlur 事件侦听器来保存编辑的文本。

所以在玉文件中你会有这个：

div.row
each cards
  div.col.m4.s12
    div.card.teal
      div.card-content.white-text
        p(contentEditable="true") #{text}

在模板事件中：

'blur .card-content p': function(event) {...}

PS 在本地测试时发现 chrome: Additional div on enter的奇怪问题- 请务必考虑到这一点。

于 2015-05-15T15:45:53.817 回答
0

如果要从任何元素中删除预定义样式，请将覆盖添加到属性中

<div style="border:none;"></div>

或使用 CSS 覆盖

#element {
    border: none;
}

如果 CSS 覆盖不能自动工作，请使用 !important。

#element {
    border: none !important;
}
于 2015-05-19T08:03:55.637 回答
0

使用此代码，您可以删除 MaterializeCSS：

<style type="text/css">

  .MyDiv input[type=text]:not(.browser-default){
    padding: 1% 6%;
     box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;  
    height: 33px;
}

.MyDiv input[type=text]:not(.browser-default):focus:not([readonly]){
           -moz-box-shadow: 0 0 8px #88D5E9;
    -webkit-box-shadow: 0 0 8px #88D5E9;
    box-shadow: 0 0 8px #88D5E9;
    border: 1px solid #88D5E9;
}
</style>


<div class="MyDiv">
    <input type="text" name="username">
</div>
于 2017-09-21T20:41:13.667 回答