捕捉输入字段中的文本变化答案

【问题标题】：catch the text change in a input field捕捉输入字段中的文本变化
【发布时间】：2023-03-17 01:25:02
【问题描述】：

我正在使用 joomla 日历来选择日期。下面显示了它的html代码。在这里，当您单击图像时，会弹出日历，您可以在此处选择一个日期，弹出窗口将关闭，日期值显示在输入文本字段中。我想要的是如果日期发生更改，我想编写一个函数来执行 ajax 发布。（输入文本更改）。我尝试了简单的 alert() 但没有奏效。我认为这是由于失去了对文本字段的关注，因为只有我们单击的图像并且没有使用鼠标或任何按键与输入字段接触。请帮我解决这个问题。

$("#select_date").change(function(){
   alert('Working');
});

HTML 代码

<input id="select_date" type="text" value="2012-02-16" name="select_date" title="Thursday, 16 February 2012">
<img id="select_date_img" class="calendar" alt="Calendar" src="/eap_movies/media/system/images/calendar.png">

PHP 代码

JHTML::_('behavior.calendar');
JHTML::calendar(date('Y-m-d'),'select_date', 'select_date', '%Y-%m-%d');

【问题讨论】：

日历控件是否有一个可以在选择日期时使用的回调？

标签： javascript jquery joomla

【解决方案1】：

Mihai Bazon's DHTML Calendar v1.0 （在 /media/system/js/calendar.js 下） 有一个针对 onSelected 和 onClose 事件的回调。所以应该可以捕捉到日历何时关闭或用户何时选择日期。

解决方案 1 - 编辑 Joomla

第 1 步 - 您需要覆盖此文件：libraries/joomla/html/html.php

// added $onSelected parameter
public static function calendar($value, $name, $id, $format = '%Y-%m-%d', $attribs = null, $onSelected)
{
  ...
$document->addScriptDeclaration('window.addEvent(\'domready\', function() {Calendar.setup({
            inputField: "'.$id.'",          // id of the input field
            ifFormat: "'.$format.'",        // format of the input field
            button: "'.$id.'_img",          // trigger for the calendar (button ID)
            align: "Tl",                            // alignment (defaults to "Bl")
            singleClick: true,
            onSelected: '.$onSelected.'
});});');
...
}

第 2 步 - 为 onSelected 定义回调

JHTML::_('behavior.calendar');
JHTML::calendar(date('Y-m-d'),'select_date', 'select_date', '%Y-%m-%d', null, 'userSelectedDate');

第 3 步 - 实现回调

function userSelectedDate(calendar, date){ ... }

注意：我没有主动安装 Joomla，所以上面的代码可能有语法错误。

解决方案 2 - Sara 更简单的解决方案

在JHTML::calendar的$attribs参数中添加onchange定义：

JHTML::calendar(date('Y-m-d'),'select_date', 'select_date', '%Y-%m-%d','onchange="myfunction();"');

也请访问DHTML Calendar Website。

【讨论】：

好主意！！！。我没有看到 docs.joomla.org/API16:JHtml/calendar 现在我通过 html 属性做到了。 JHTML::calendar(date('Y-m-d'),'select_date', 'select_date', '%Y-%m-%d', 'onchange="myfunction();"'); 并且有效。
那个肯定更容易:)

【解决方案2】：

只有在输入松散焦点（模糊）时才会触发更改事件。

如果可能的话，您可以观察 keypress、keyup 或 keydown 事件，或者在选择日期时触发自己的事件。

【讨论】：

【解决方案3】：

您使用哪个版本的 jquery ？我有同样的问题，我去了

$('elementName').on("input propertychange",function() {
 alert("detected");
});

因为在您的情况下使用 keyup 事件将不起作用，因为实际上没有用户与该字段进行交互。

【讨论】：