更改事件添加日期时的内容可编辑字段

Contenteditable field onchange event add date

本文关键字：编辑 字段 事件 添加 日期      更新时间：2023-09-26

HTML:

 <p id="bon_date"  class="inline" style="color:#0000ff;" contenteditable="true" onchange="add7day()"> enter date </p>

javascript:

     function add7day() {
         var str = document.getElementById(#bon_date).value;
         var startdate = str.split("/");
         var month = parseInt(stardate[0], 10);
         var day = parseInt(stardate[1], 10);
         var o_month = parseInt(stardate[0], 10);
         var o_day = parseInt(stardate[1], 10);
         if (month == 1 | month == 3 | month == 5 | month == 7 | month == 8 | month == 10 | month == 12) {
           if ((day + 7) > 31) {
             month = month + 1;
             day = day + 7 - 31;
           } else {
             day = day + 7;
           }
           document.getElementById(#bon_date).innerHTML = o_month + "/" + o_day + "~" + month + "/" + day;
         } else {
           if ((day + 7) > 30) {
             month = month + 1;
             day = day + 7 - 30;
           } else {
             day = day + 7;
           }
           document.getElementById(#bon_date).innerHTML = o_month + "/" + o_day + "~" + month + "/" + day;
         }

我可以从输入类型字段中获取字符串，但不能从内容可编辑字段中获取。

当它运行到var month = parseInt(stardate[0],10);时，我会收到以下错误：

未定义标准[0]。。

我想手动输入日期，并在7天后获得日期。

有什么想法吗？

好的，从哪里开始。

我不会质疑使用contenteditable元素而不是input type="text"或input type="date"元素，我只是要修复您的JavaScript。

具有contenteditable的元素不会转换为input元素或textareas，因此它们不具有value属性，但它们具有textContent，因为它们在其他方面是可以具有文本节点的普通HTML节点。

具有contenteditable的元素在编辑其文本内容时也不会发出onchange或change事件。您可以监听input事件，但这会破坏您的代码，因为每次用户按键时，您的函数都会不断修改元素的内容—使得它实际上无法使用。

onchange事件的下一个优点是onblur/blur事件，所以我们将使用它。这意味着，当用户将注意力集中在事件上时，即点击事件外部(或按下制表键等(，该功能将启动。

stardate[0]返回为undefined，因为您没有定义一个名为stardate的变量，而是定义了startdate。类似地，如果不获得bon_date元素，任何代码都无法工作，在这种情况下，这将通过修复代码来完成，从而为document.getElementById()提供一个参数'bon_date'(而不是'#bon_date'，因为document.getElementById不使用CSS选择器(。

// Store the element in a variable so we don't have to keep writing this crap out.
var bd = document.getElementById('bon_date');
// Listen for the blur event by adding an event listener in JavaScript.
// You could also use an 'onblur=' attribute on the element in question.
bd.addEventListener('blur', add7day, false);
function add7day() {
  // Get the element's text content.
  var str = bd.textContent;
  // You could just say startdate = bd.textContent.split("/") and leave out out the str variable.
  var startdate = str.split("/");
   
  var month = parseInt(startdate[0], 10);
  var day = parseInt(startdate[1], 10);
  var o_month = parseInt(startdate[0], 10);
  var o_day = parseInt(startdate[1], 10);
   
  if (month == 1 | month == 3 | month == 5 | month == 7 | month == 8 | month == 10 | month == 12) {
    if ((day + 7) > 31) {
      month = month + 1;
      day = day + 7 - 31;
    } else {
      day = day + 7;
    }
    // no need to use innerHTML, just amend the textContent again
    bd.textContent = o_month + "/" + o_day + "~" + month + "/" + day;
  } else {
    if ((day + 7) > 30) {
      month = month + 1;
      day = day + 7 - 30;
    } else {
      day = day + 7;
    }
   bd.textContent = o_month + "/" + o_day + "~" + month + "/" + day;
  }
}
<p id="bon_date" class="inline" style="color:#0000ff;" contenteditable="true"> Enter date (MM/DD) </p>

这使您的代码工作。有点。你应该考虑验证用户输入，以确保它是一个有效的日期(而不是第50个月的第1000天(等。Moment.js是一个非常方便的JavaScript库，可以在处理日期和时间时使用。

相关文章：