Как отключить кнопку отправки по умолчанию, пока в ее текстовой области не будет напечатан 1 или более символов?

В настоящее время, когда текстовая область сфокусирована, она увеличивает свою высоту и появляется кнопка "Отменить". Теперь я бы хотел отключить кнопку отправки по умолчанию и сделать ее активной только после ввода текстовой области.

Позже я добавлю непрозрачность к неактивной кнопке отправки, а затем уберу ее, когда кнопка активна, просто для приятного эффекта. Но в любом случае я пытался отключить приложение многими способами, и это не работает. Я пробовал различные другие вещи, такие как определение функции щелчка, а также отправка, а затем применение отключенного с помощью attr() к атрибуту disabled моей формы, и это, похоже, не имеет никакого эффекта.

HTML

        <div class="comment_container">
                    <%= link_to image_tag(default_photo_for_commenter(comment), :class => "commenter_photo"), commenter(comment.user_id).username %>

                    <div class="commenter_content"> <div class="userNameFontStyle"><%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %> - <%=  simple_format h(comment.content) %> </div>
                </div><div class="comment_post_time"> <%= time_ago_in_words(comment.created_at) %> ago. </div>


           </div>


                    <% end %>
                <% end %>


            <% if logged_in? %>
            <%= form_for @comment, :remote => true do |f| %>
            <%= f.hidden_field :user_id, :value => current_user.id %>
            <%= f.hidden_field :micropost_id, :value => m.id %>
            <%= f.text_area :content, :placeholder => 'Post a comment...', :class => "comment_box", :rows => 0, :columns => 0 %>

    <div class="commentButtons">         
      <%= f.submit 'Post it', :class => "commentButton" %>
   <div class="cancelButton"> Cancel </div>
    </div>   
            <% end %>

            <% end %>

JQuery:

$(".microposts").on("focus", ".comment_box", function() {
    this.rows = 7;


    var $commentBox = $(this),
        $form = $(this).parent(),
        $cancelButton = $form.children(".commentButtons").children(".cancelButton");
       // $commentButton = $form.children(".commentButtons").children(".commentButton");
            $(this).removeClass("comment_box").addClass("comment_box_focused").autoResize();  
            $form.children(".commentButtons").addClass("displayButtons");

                $cancelButton.click(function() {
                    $commentBox.removeClass("comment_box_focused").addClass("comment_box");
                    $form.children(".commentButtons").removeClass("displayButtons");
                    $commentBox.val("");



                });

});

С уважением

Источник

5 ответов

Решение

Установка отключенного атрибута не работает, потому что если присутствует отключенный атрибут, поле отключается независимо от значения атрибута. Вы могли бы использовать .removeAttr("disabled"), но это действительно имеет смысл манипулировать disabled свойство, которое является более интуитивным - это просто логическое значение.

$commentButton.prop({ disabled: !$commentBox.val());

Чтобы быть в безопасности, привязать к onkeyup, oninput, а также onchange:

$commentBox.on("keyup input change", function () {
    $commentButton.prop({ disabled: !$commentBox.val() });
});

Если вам нужно вручную включить или отключить кнопку, например, после очистки формы, вы можете передать true или же false прямо на звонок .prop(),

$commentButton.prop({ disabled: true });



Изменить: Подробная разбивка

.prop() метод

.prop() Метод получает и устанавливает значения свойств для элементов, аналогично тому, как .attr() получает и устанавливает значения атрибутов для элементов.

Учитывая это jQuery:

var myBtn = $("#myBtn");
myBtn.prop("disabled", true);

Мы можем переписать это простым JavaScript следующим образом:

var myBtn = document.getElementById("myBtn");
myBtn.disabled = true;

Почему нам не нужен if заявление

Причина, по которой нам не нужен if Заявление о том, что disabled свойство принимает логическое значение. Мы могли бы положить логическое выражение в if оператора, а затем, в зависимости от результата, назначьте другое логическое выражение в качестве значения свойства:

if (someValue == true) {
    myObj.someProperty = false;
}
else {
    myObj.someProperty = true;
}

Первая проблема заключается в избыточности в if заявление: if (someValue == true) можно сократить до if (someValue), Во-вторых, весь блок можно сократить до одного оператора с помощью логического оператора not ( ! ):

myObj.someProperty = !someValue;

Логический не оператор (!) возвращает отрицательный результат выражения - т.е. true для значений "фальси" и false для "правдивых" ценностей. Если вы не знакомы с "истинными" и "ложными" ценностями, вот небольшой пример. Каждый раз, когда вы используете не булево значение, где ожидается логическое значение, оно приводится к булевому значению. Значения, которые оценивают в true Говорят, что "правдивый" и ценности, которые оценивают false Говорят, что "фальси".

 Введите Falsey values ​​Истинные значения
 ———————— ———————————————————————————————————————
 Номер 0, NaN Любой другой номер
 Строка "" Любая непустая строка
 Объект null, undefined Любой ненулевой объект

Поскольку пустая строка оценивается как false, мы можем получить логическое значение, указывающее, есть ли какой-либо текст в текстовой области, применяя ! к значению:

var isEmpty = !$commentBox.val();

Или используйте !! сделать двойное отрицание и эффективно привести строковое значение к логическому:

var hasValue = !!$commentBox.val();

Мы могли бы переписать jQuery сверху в более подробную форму на простом JavaScript:

var myBtn = document.getElementById("myBtn");
var myTextBox = document.getElementById("myTextBox");
var text = myTextBox.value;
var isEmpty = !text;
if (isEmpty) {
    myBtn.disabled = true;
}
else {
    myBtn.disabled = false;
}

Или чуть короче и больше похоже на оригинал:

var myBtn = document.getElementById("myBtn");
var myTextBox = document.getElementById("myTextBox");
myBtn.disabled = !myTextBox.value;
Источник

Вы можете попробовать это:

var submit = $("input[type=submit]");
submit.attr("disabled","disabled");

$('textarea.comment_box').keyup(function() {
    if ( !$(this).val() ) {
       submit.attr("disabled","disabled");
    } else {
       submit.removeAttr("disabled");
    }
});

Вот JS Fiddle, чтобы вы могли попробовать это: http://jsfiddle.net/leniel/a2BND/

Источник

Сначала вы можете отключить кнопку отправки, и если textarea имеет значение, включите ее:

<form id="yourForm">
<textarea id="ta"></textarea>
<input id="submit" type="submit" disabled="disabled">    
<form> 

$("#yourForm").change(function() {

  if ( $("#ta").val().length >= 1) {

    $("#submit").removeAttr("disabled"); 
  }

  else {

    $("input").attr("disabled", "disabled");

  }              

});

http://jsfiddle.net/dY8Bg/2/

Источник

Вы можете выполнить эту задачу, используя событие keyup в текстовой области. Пример кода концепции ниже.

$("#textareaid").on('keyup', function (e) {
     Count_Chars(this);
});

function Count_Chars(obj) {
    var len = obj.value.length;
    if (len >= 1) {
        // do task
        // enable post button
    }
}

Источник

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

commentButton = form.children(".commentButtons").children(".commentButton");

       commentButton.attr("disabled","disabled");

        commentBox.keyup(function() {
            if ( !$(this).val() ) {
               commentButton.attr("disabled","disabled");
            } else {
               commentButton.removeAttr("disabled");
            }
        });
Источник
Другие вопросы по тегам