Question

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;

         }

我可以从输入类型字段中获取字符串，但我无法从contenteditable字段中获取它。

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

stardate [0]未定义..

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

有什么想法吗？

Answer 1

好的，从哪里开始。

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

contenteditable元素未转换为input元素或textareas，因此它们没有value属性，但它们的确有textContent因为它们是普通的HTML节点，可以有文本节点。

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

onchange事件的下一个最好的事情是onblur / blur事件，因此我们将使用它。这意味着当用户关注事件时，即在其外部点击（或按Tab键等）时，该功能将触发。

stardate[0]返回undefined，因为您没有定义名为stardate的变量，您定义了startdate。同样，如果没有获取bon_date元素，则根本没有任何代码可以工作，在这种情况下，可以通过修复代码来完成，document.getElementById()被赋予参数'bon_date'（不是{{1}因为'#bon_date'不使用CSS选择器。）

document.getElementById

// 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;

  }
}

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

Contenteditable字段onchange事件添加日期

1 个答案: