为什么在 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修复这个错误。您应该向他们发送一封有关它的电子邮件。
特,实际上有人发现了这个错误 - 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";