Question

我试图格式化textarea中的用户输入，其中额外的空格和输入被替换为单个空格，幸运的是这部分有效，但只有在第二次点击按钮时才有效。我想知道什么是错的以及如何解决这个问题：

HTML

<textarea type="text" id="address" onfocus="if(this.value===this.defaultValue)this.value=''" onblur="if(this.value==='')this.value=this.defaultValue">
   Input Address Here
</textarea>
<input type="button" id="Validate" value="Validate" onClick="valbtn()">

Jquery的/使用Javascript

function valbtn() {
    $("#Validate").click(function () {
        $('#address').val($('#address').val().replace(/\s+/g, ' '));
    });
    var x = document.getElementById("address").value;
    if (x === "" || x === "Input Address Here") {
        alert("No Input");
    }
}

Answer 1

首次点击时会调用您当前的函数valbtn()并将您的验证绑定到再次点击。因此，在实际运行验证之前，您必须再次单击。

如果您继续拨打valbtn()，请修改以下功能：

function valbtn() {

    // Run it instead of binding it to the click event
    $('#address').val($('#address').val().replace(/\s+/g,' '));

    var x = document.getElementById("address").value;
    if (x === "" || x === "Input Address Here") {
        alert("No Input");
    }
}

Answer 2

因为您在点击功能中分配了第二个点击处理程序。

从您的HTML中删除onClick属性，在Javascript中使用以下代码替换当前代码：

$("#Validate").click(function () {
    $('#address').val($('#address').val().replace(/\s+/g, ' '));
});

Answer 3

将您的代码更改为：

<script type="text/javascript">
    $(document).ready(function() {
        $("#Validate").click(function() {
            $('#address').val($('#address').val().replace(/\s+/g, ' '));
            var x = document.getElementById("address").value;
            if (x === "" || x === "Input Address Here") {
                alert("No Input");
            }
        });
    });
</script>

并完全删除输入中的onclick事件：

<input type="button" id="Validate" value="Validate">

使用JQuery你不需要它。

您在动作侦听器中有一个动作侦听器，或者换句话说，您混合了jQuery和JavaScript我建议您删除上面描述的JavaScript调用并执行一个更清晰易用的纯JQUery动作侦听器。

它还会为您提供浏览器兼容性。

Answer 4

你应该移动

$("#Validate").click(function () {
    $('#address').val($('#address').val().replace(/\s+/g, ' '));
});

在valbtn函数之外：

$("#Validate").click(function () {
    if (valbtn()) {
        $('#address').val($('#address').val().replace(/\s+/g, ' '));
    }
});

我还使valbtn返回布尔值，指示是否需要处理：

function valbtn() {
    var x = $("#address").value;
    if (x === "" || x === "Input Address Here") {
        alert("No Input");
        return false;
    }
    return true;
}

更新了代码：http://jsfiddle.net/EnXp7/1/

Answer 5

将你的jquery脚本放在一边valbtn（）函数。不需要仅创建函数

代码

$("#Validate").click(function () {
    $('#address').val($('#address').val().replace(/\s+/g,' '));
});

Jquery点击事件在第二次点击时起作用

5 个答案:

更新了代码：http://jsfiddle.net/EnXp7/1/