使用 JavaScript 更改按钮文本在 Opera (11.11) 中不适用于 <input type= "submit" /> 元素。为什么?



为什么在 Opera 11.11 中更改按钮文本不适用于以下元素

<input type="submit" value="Asdasd" id="blahblah_button" />

?(尚未在早期版本中尝试过。

我用jQuery和"纯"JavaScript也尝试过,它们都没有奏效。
这是我尝试过的jQuery代码:

$('#blahblah_button').val('Blah-blah');

这是"纯"JS代码:

document.getElementById('blahblah_button').value = 'Blah-blah';

为什么它们在 Opera 11.11 中都不起作用
它确实适用于 IE、Chrome 和 FF,令我惊讶的是它在 Opera 中不起作用。

我不得不提到,它也适用于 Opera 中的按钮标签:

<button id="test_button" onclick="$(this).text('Blahblah');">Some text</button> 

提前感谢您的回答!


编辑 I. (0:40)

我忘了提到修改后查询按钮的值会给出它似乎工作正常的结果,这意味着它会更改 JS DOM 中的结构,但不会适当地重新渲染可见按钮。

以下是可以尝试此行为的示例代码:

http://jsbin.com/inuxix/1/edit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="hu" xml:lang="hu">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Changing button text</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <p>Button tag - WORKING
            <button onclick="$(this).text('Blahblah_1');" id="test_button">Button_text (button_tag)</button>
        </p>
        <p>Input tag (type: submit) - NOT working
            <input onclick="$(this).val('Blahblah_2');" type="submit" value="Submit_text" id="blahblah_submit_type" />
        </p>
        <p>Input tag (type: button) - WORKING
            <input onclick="$(this).val('Blahblah_3');" type="button" value="Button_text" id="blahblah_button_type" />
        </p>
        <p>
            <button onclick="alert($('#blahblah_submit_type').val());" id="val_button">Getting blahblah_submit_type's value</button>
        </p>
    </body>
</html>

编辑二.(4:41)

但我还必须提到它确实适用于具有"按钮"类型的输入元素 - 所以我用这样的元素补充了上面的代码。我还标记了哪些类型有效,哪些无效。


编辑三.

与此同时,我对其进行了测试,它在 Opera <= 11.11 中不起作用,但此错误已在 Opera 11.50 中修复

这是 Opera 中的一个错误。我不确定是什么原因造成的,但是重命名按钮的简单测试页面不会触发任何问题,但是在@Darin的 jsfiddle.net 示例中确实出现了该错误。

这似乎是一个重绘错误。我注意到按钮的宽度发生了变化以匹配新标签,但实际标签没有改变。此外,离开页面并返回时,将显示新标签而不是旧标签。

我做了一个快速的谷歌,找不到其他遇到过它的人。

这是我找到的解决方法:

$('#blahblah_button').val('there');
$('#blahblah_button').get(0).outerHTML = $('#blahblah_button').get(0).outerHTML;

也许有人可以找到一个更干净的解决方法,理想情况下是内置在jQuery的val()方法中的解决方法。但最好的解决方案显然是让Opera修复这个错误。您应该向他们发送一封有关它的电子邮件。

@Abhi贝克

特,实际上有人发现了这个错误 - http://webinterfacetricks.com/opera_submit_bug/我已经测试过它,它可以工作:

<html>
<input type="submit" value="A" id="blahblah" onClick="click_input(this)" />
<script>
    function click_input(input)
    {
        input.value = "test";
        input.type = "submit";
    }
</script>
</html>

是的,这很奇怪,但我希望 Opera 的人能尽快修复它。顺便说一句,你能报告他们吗?

我找到了js的另一种方法:

document.getElementById('blahblah_button').innerText = "testText";

最新更新