Question

我有一个按钮（名为Benjamin）：

<input type="submit" name="btn_submit" value="Next &rarr;" />

在点击事件中，它会显示“正在加载”并执行很酷的操作。但是，如果出现问题，我希望它在其他地方显示错误消息时更改回原始文本。

$('input[name=btn_submit]').click(function() {
    $(this).val('Loading');

    // Logicy Stuff...

    // Error?
    $(this).val('Next &rarr;');

    return false;
});

不知何故，文字文本→应用于按钮，而不是酷→。我该如何解决这个问题？

Answer 1

使用JavaScript的不同规则评估Html。 Html实体仅由html解析器解析。使用unicode文字，如下所示：

$(this).val('Next \u2192');

或者更好，跟踪原始值，然后将其设置回来：

var initalButtonValue = $(this).val();
$(this).val('Loading');

// Stuff

$(this).val(initialButtonValue);

或者甚至更好，使用HTML数据属性来存储状态。

<input type="submit" name="btn_submit" value="Next &rarr;" data-normal-value='Next &rarr;' data-loading-value='Loading...' />

然后：

// Set to loading
$(this).val($(this).data("loading-value"));

// and back to normal
$(this).val($(this).data("normal-value"));

Answer 2

将实际的→字符放在那里而不是HTML实体。使用实体仅在设置HTML内容时有效 - 而表单值根本不是HTML。

在<input value="...">中使用它时它才有效，因为在这种情况下，在解析HTML时会替换实体，因此该值将获得实际字符。

Answer 3

如何使用$.data()存储元素的值并稍后检索它：

$('input[name=btn_submit]').click(function() {
    $.data(this, 'value', this.value);
    $(this).val('Loading');

    // Logicy Stuff...

    // Error?
    $(this).val($.data(this, 'value'));

    return false;
});

以下是演示：http://jsfiddle.net/39thm/（setTimeout仅用于演示）

$.data()的文档：http://api.jquery.com/jquery.data

你也不止一次使用thr $(this)选择器，如果你一堆使用它，那么缓存选择是个好主意：

$('input[name=btn_submit]').click(function() {
    var $this = $(this);

    $.data(this, 'value', this.value);

    $this.val('Loading');

    // Logicy Stuff...

    // Error?
    $this.val($.data(this, 'value'));

    return false;
});

Answer 4

如果您知道该字符的代码，可以使用.fromCharCode()将其添加到JavaScript字符串中：

var s = "hello " + String.fromCharCode(1023); // just a made-up number

如果你知道它们的十六进制代码，你也可以在JavaScript字符串中嵌入字符：

var s = "string \u1023 string";

Answer 5

$("input[name='btn_submit']").click(function() {
    var elem = $(this);
    elem.data( "orgText", elem.val() ).val('Loading');       
    window.setTimeout( 
        function(){
            elem.val( elem.data("orgText") );
        }, 1000 );

    return false;
});

jsFiddle

用JS注入的特殊HTML字符

5 个答案: