Question

我想更改并验证html的h2标签的值。我把它放在一个div中。当前情况是当我按下h2标签时，它会自动打开一个文本框，我可以编辑/清除文本框的值。

问题：当我尝试清空文本框值时，它不会在运行时生成错误消息。但是当我单击我的jsp文件时会生成错误消息。这是一个示例代码。

<div class="modal-header">
  <h2 class="tc_pageheader editableName" id="detailsheader"></h2>
</div>

在我的情况下，当id值为空时，它必须显示一条错误消息，即h2标签不能为空。我想通过使用jQuery（v1.9）进行验证来实现这一点。

Answer 1

由于代码不多，我嘲笑了我认为你要做的事情。

演示：http://jsfiddle.net/NnkRV/

代码：

$(document).on('click', '#detailsheader', function() {
    $(this).replaceWith("<input type='text' id='edit' value='" + $(this).text() + "' />");
});

$(document).on('focusout', '#edit', function() {
    var newTitle = this.value;
    if (newTitle == '') {
        alert("Cant be blank!");
        return false;
    }
    else {
        $(this).replaceWith('<h2 class="tc_pageheader editableName" id="detailsheader">' + newTitle + '</h2>');
    }
});

这只是让你编辑H2的标题，如果标题是空白则显示错误。

无法在jquery中验证可编辑的h2标记

1 个答案: