在一个输入框中使用两种字体答案

【问题标题】：Use two fonts in one input box在一个输入框中使用两种字体
【发布时间】：2016-05-05 09:15:06
【问题描述】：

我正在编写一个程序，当用户单击复选框时，输入（我正在编写）的字体会发生变化。首先，如果未选中复选框，则字体为“arial”，选中复选框时，输入字体应变为“verdana”。

我可以做到这一点，但该函数会更改之前写入 verdana 的所有文本。

代码示例：

<input type= "checkbox" onchange = "tests();" name="remember" id = "remember"> **(Checkbox)**

function tests(){
        if (remember.checked == 1){
        $(.form-control).css('font-family','verdana');
    }else{
     $('.form-control').css('font-family','arial');
    }

    }

我需要每当我检查这个时，即将到来的数据应该在 verdana 中，而之前的数据应该在输入框中保持不变。

【问题讨论】：

标签： javascript php html fonts

【解决方案1】：

不要更改整个表单类$(.form-control)的字体，而是针对特定类的复选框进行更改

更新： 添加这个css

input[type=checkbox]:checked + label {
  font-family:'verdana'
} 
input[type=checkbox] + label {
  font-family:'arial'
}

【讨论】：

【解决方案2】：

在您的代码中，您似乎使用的是 JQuery，因此您可以这样做：

$("#remember").change(function() {
  if ($(this).is(":checked")) {
    $(".myText").css("font-family", "Verdana");
  } else {
    $(".myText").css("font-family", "Arial");
  }
});

Here is the JSFiddle demo

【讨论】：