如何使用下拉列表在文本框中设置字体系列？

Question

我有以下代码

<html>
   <form method="post" action="Demo7.jsp">
      Select Programming font:
      <select name="font">
         <option value="arial">arial black</option>
         <option value="tohma">ENGLISH</option>
         <option value="times new roman">times new roman</option>
      </select>
      EnterValue: <input type="text" name="text1"><br> 
      <br>
      <input type="submit" value="Submit"><br>
   </form>
</html>

我想使用从下拉列表中选择的字体。 它应基于所选字体更改文本框和文本框字体。

我不知道该怎么做。 请帮我。

提前致谢。

Answer 1

尝试这个，

$(function(){
    $('select[name="font"]').on('change',function(){
        $('input[name="text1"]').css('font-family',this.value);
    });
});

现场演示

Answer 2

尝试

$("select[name='font']").change(function() {
      $("input[name='text1']").css("font-family", $(this).val());

});

Answer 3

尝试这个。

$('select').on('change', function(){
    $('textarea').css('font-family', $(this).val()); //for textarea
    //$('input[type="text"]').css('font-family', $(this).val()); // for textbox
});

演示

Answer 4

添加一些课程供选择

试一下

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
     $('.somefont').change(function(){
        font= $(this).val();
        //Set Font Family for element that you needed.
        $('body').css('font-family', font);
     });
</script>

Answer 5

如果您不想使用jQuery，则只需将普通的JavaScript，CSS和onChange属性添加到select元素中，就可以很轻松地完成此操作。 就像是：

<select name="font" onChange="document.getElementsById('text1').style.fontFamily = this.value;">
  <option value="arial">arial black</option>
  <option value="tahoma">ENGLISH</option>
  <option value="times new roman">times new roman</option>
</select>

EnterValue: <input type="text" name="text1" id="text1"><br>

请注意，您还需要在文本输入中添加id属性，此功能才能起作用。

如何使用下拉列表在文本框中设置字体系列？

问题描述

5 个解决方案

解决方案1
1 2014-03-04 05:58:20

解决方案2
0 2014-03-04 05:59:39

解决方案3
0 已采纳 2014-03-04 06:03:14

解决方案4
0 2014-03-04 06:09:30

解决方案5
0 2014-03-04 06:13:58

如何使用下拉列表在文本框中设置字体系列？

问题描述

5 个解决方案

解决方案1 1 2014-03-04 05:58:20

解决方案2 0 2014-03-04 05:59:39

解决方案3 0 已采纳 2014-03-04 06:03:14

解决方案4 0 2014-03-04 06:09:30

解决方案5 0 2014-03-04 06:13:58

解决方案1
1 2014-03-04 05:58:20

解决方案2
0 2014-03-04 05:59:39

解决方案3
0 已采纳 2014-03-04 06:03:14

解决方案4
0 2014-03-04 06:09:30

解决方案5
0 2014-03-04 06:13:58