使用meteor.js选择时突出显示输入框

Question

我正在学习流星。我正在尝试将我仅使用 html、css 和 javascript 创建的应用程序改编为meteor.js 框架，仅用于学习目的。但是我在使用流星框架使此代码工作时遇到问题。我是否需要使用帮助程序来选择电子邮件类，然后使用 javascript 进行更改？

对不起，如果这是一个愚蠢的问题，但我花了一整天的时间搜索，我自己无法找到。

代码：

HTML

<input type="text" value="E-mail" class="email-inactive" onFocus="toggleText(this);" onBlur="toggleText(this);">

JS

    var toggleText = function (el)
{
    var v = el.value;

   //Remove text to allow editing
    if(v=="E-mail") {
        el.value = "";
        el.className = "email-active";
    }
    else {
         //Remove whitespace
        if(v.indexOf(" ")!=-1) {
            split = v.split(" ").join("");
            v = split;
        }

          //Change to inactive state
        if(v=="") {
            el.value = "E-mail";
            el.className = "email-inactive";
        }
    }
}

CSS

.email-active {
    font-family: 'Lato';
    border-radius: 4px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.79);
    height: 44px;
    padding: 0 8px;
    width: 350px;
    background-color: rgba(255, 255, 255, 0.33);
    vertical-align: bottom;
    border-color: #2980b9;
    -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;
    border: 1px solid #DDDDDD;
}

.email-active:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
    border-radius: 4px;
}

.email-inactive {
    font-family: 'Lato';
    font-weight: 300;
    color:rgba(255, 255, 255, 0.26);
    height: 44px;
    padding: 0 8px;
    width: 350px;
    background-color: rgba(255, 255, 255, 0.33);
    vertical-align: bottom;
    border: 0;
    border-radius: 4px;

}

Answer 1

您可以使用 jQuery 将类替换为事件而不是帮助器

Template.emailTemplate.events({
  'focus #email':function(event){
    event.preventDefault();
    $(event.target).removeClass('email-inactive').addClass('email-active')
  },
  'focusout #email':function(event){
    event.preventDefault();
    $(event.target).removeClass('email-active').addClass('email-inactive')
  }
});