Как установить семейство шрифтов в текстовом поле, используя выпадающий список?

0

У меня есть следующий код

<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>

Я хочу использовать выбранный шрифт из выпадающего списка. Он должен изменить шрифт текстового поля и текстового поля на основе выбранного шрифта.

Я не знаю, как это сделать. Пожалуйста, помогите мне.

Заранее спасибо.

  • 0
    это странный вопрос. Вы хотите отправить форму на сервер или нет? если да, используйте шаблонизатор, чтобы установить, например, встроенный стиль для текстового поля. или, как указано ниже, используйте jquery для установки стиля CSS при изменении
Теги:

5 ответов

0
Лучший ответ

Попробуй это.

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

демонстрация

Поделиться
  • 0
    я использую текстовое поле вместо текстового поля, оно не работает
  • 0
    я обновил скрипт для textarea. демонстрация
1

Попробуй это,

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

Демо-версия

Поделиться
  • 0
    Почему отрицательный голос?
0

Если вы не хотите использовать 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 для ввода текста, чтобы это работало.

Поделиться
0

пытаться

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

});
Поделиться
  • 0
    У вас пропал апостроф.
  • 0
    @Kuma: исправлено, спасибо за указание
0

Добавить класс для выбора

И попробуйте

<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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню