如何检查输入值何时更改？

Posted 2023-05-08

【中文标题】如何检查输入值何时更改？

【英文标题】：How to check when input value is changed?

【发布时间】：2022-01-16 00:09:57

【问题描述】：

如何检查输入值何时更改。

我有一个日历，当我单击日历时，它会更改输入值，但是当我尝试查看它是否已更改时，它不起作用。我已经尝试过 AddEventListener，还有 jquery on change，我还发送了一个关于 change 的函数来调用它，但它们都没有工作。

  <input type="text" id="date" class="date" onchange="changed()" name="" >
   function changed()
      alert("hello world");
    

创建日历的主js文件： 此函数在我的 php 文件中创建日历。 然后当点击它时，它会在输入中获得 ID 为 #date 的值 但是当我试图查看值是否发生变化时，它不起作用。

// Initialize the calendar by appending the html dates
function init_calendar(date) 
    $(".tbody").empty();
    $(".events-container").empty();
    var calendar_days = $(".tbody");
    var month = date.getMonth();
    var year = date.getFullYear();
    var day_count = days_in_month(month, year);
    var row = $("<tr class='table-row'></tr>");
    var today = date.getDate();
    // Set date to 1 to find the first day of the month
    date.setDate(1);
    var first_day = date.getDay();
    // 35+firstDay is the number of date elements to be added to the dates table
    // 35 is from (7 days in a week) * (up to 5 rows of dates in a month)
    for(var i=0; i<35+first_day; i++) 
        // Since some of the elements will be blank, 
        // need to calculate actual date from index
        var day = i-first_day+1;
        // If it is a sunday, make a new row
        if(i%7===0) 
            calendar_days.append(row);
            row = $("<tr class='table-row'></tr>");
        
        // if current index isn't a day in this month, make it blank
        if(i < first_day || day > day_count) 
            var curr_date = $("<td class='table-date nil'>"+"</td>");
            row.append(curr_date);
           
        else  
            var monthplusone = months[month];
            var curr_date = $("<td  class='table-date' id='"+day+"-"+monthplusone+"-"+year+"'>"+day+"</td>");
            var events = check_events(day, month+1, year);
            if(today===day && $(".active-date").length===0) 
                curr_date.addClass("active-date");
                let x = document.getElementById('date').value=day+"-"+monthplusone+"-"+year;
    
                 $('.table-date').ready(function () 
                   x.value;
                  );
                show_events(events, months[month], day);
            
            // If this date has any events, style it with .event-date
            if(events.length!==0) 
                curr_date.addClass("event-date");
            
            // Set onClick handler for clicking a date
            $('.table-date').on('click', function () 
              document.getElementById('date').value = $(this).attr('id');
            );
            curr_date.click(events: events, month: months[month], day:day, date_click);
            row.append(curr_date);
        
    
    // Append the last row and set the current year
    calendar_days.append(row);
    $(".year").text(year);

【问题讨论】：

显示您实际尝试过的内容，也许有人可以帮助您解决问题。

它有很多代码。我知道这可能很难理解，但我只需要逻辑。谢谢你的回答。

只显示相关代码。

好的，我会发布它

刚刚发布了一张我正在寻找的图片。 @斯科特猎人

【参考方案1】：

请注意，change 实际上是在输入不再聚焦时触发的。

document.getElementById("date").addEventListener("change", function () 
        alert("hello world");
    );

<input type="text" id="date" class="date" name="">

【讨论】：

不工作的兄弟。

这能回答你的问题吗？ ***.com/questions/16250464/…

【参考方案2】：

这行得通。不确定您在哪里遇到问题。

 function changed()
    console.log("hello world");
 

 <input type="text" id="date" class="date" onchange="changed()" name="" >

编辑：对于有兴趣回答的其他人来说，init_calender() 的缩短版：

function setDate() 
    document.getElementById("date").value = '19-Dec-2021'

【讨论】：

如果您从输入更改值是的，它可以工作。但是当它从 javascript 更改时它实际上不起作用。

你需要缩短你的 init_calendar() 函数来只做简单的更新。不要专心阅读所有代码。

请看图，我想它会帮助你理解我的问题。改变时输入的值没有焦点。

我明白，但我不知道你是如何更改/设置输入值的，我不想通读你的代码，除了设置值之外还有其他 50 个步骤一个输入。帮助我，通过将您的问题提炼成最简单的形式来帮助您。

好的，请让我解释一下。这个主要的 js 代码创建了所有 td，其中包含天月和年，它给出了天月和年的 id，当我点击它们时，它会解析 (#date) 输入上的 id 值。希望你能理解。

【参考方案3】：

我基本上同意@Spankied，因为您应该尝试将代码缩短到您遇到问题的程度。但是，在查看您的代码后，似乎在我看来您需要以下功能

$('.table-date').on('click', function () 
  document.getElementById('date').value = $(this).attr('id');
);

不仅要更改#date 输入中的值，还要触发其更改事件处理函数。您可以通过将其更改为类似的东西来做到这一点

$('.table-date').on('click', function () 
  document.getElementById('date').value = $(this).attr('id');
  $("#date" ).change();
);

jQuery.change() 不带任何参数将在 jQuery 对象选择的 DOM 对象上触发预定义的“更改”事件。

【参考方案4】：

你可以使用js来做到这一点：

let x = $(...) //select the input box
let val = x.value;
function repeat() 
if (val !== x.value) 
change()


setInterval(repeat, 100)

这会检查结果是否相同。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案5】：

这可能会使您的网站有点慢，而且看起来很奇怪，但这适用于所有情况

<script>
    let Oldvalue = $('.date')[0].val();
    setInterval(() => 
         let currentValue = $('.data')[0].val()
         if (Oldvalue != currentValue) 
             //do whatever but in end write this 
             Oldvalue = currentValue;
         
    , 10);
</script>