为什么在 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/编辑
<!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 不过。
Why is that changing a button text doesn't work in Opera 11.11 for elements like
<input type="submit" value="Asdasd" id="blahblah_button" />
? (Didn't try it in earlier versions yet.)
I tried it with jQuery and with "pure" JavaScript too, none of them worked.
This is the jQuery code I tried:
$('#blahblah_button').val('Blah-blah');
and this is the "pure" JS-code:
document.getElementById('blahblah_button').value = 'Blah-blah';
Why is that none of them worked in Opera 11.11?
It DOES work in IE, Chrome and FF, it surprises me that it doesn't work in Opera.
I have to mention that it DOES work for button tags like this in Opera too:
<button id="test_button" onclick="$(this).text('Blahblah');">Some text</button>
Thanks for your answers in advance!
EDIT I. (0:40)
I forgot to mention that querying the button's value after the modification gives the result that it seems to work fine, which means it changes the structure in JS DOM, but doesn't rerender the visible button appropriately.
This is the example code with which you can try this behaviour:
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>
EDIT II. (4:41)
But I also have to mention that it DOES work for input elements with "button" type - so I complemented my code above with an element like this. I also marked which types do and which don't work.
EDIT III.
In the meantime, I tested it, and it doesn't work in Opera <= 11.11, but this bug has been fixed in Opera 11.50 though.
发布评论
评论(3)
这是 Opera 中的一个错误。我不确定是什么原因导致的,但是重命名按钮的简单测试页面不会触发任何问题,但是在 @Darin 的 jsfiddle.net 示例中确实出现了错误。
这似乎是一个重画错误。我注意到按钮的宽度发生了变化以匹配新标签,但实际标签没有改变。此外,离开页面并返回时,会显示新标签而不是旧标签。
我快速谷歌了一下,找不到其他人遇到过它。
这是我发现的一种解决方法:
也许有人可以找到一种更简洁的解决方法,最好是内置于 jQuery 的
val()
方法中。但最好的解决办法显然是 Opera 修复这个 bug。您应该向他们发送一封有关此事的电子邮件。This is a bug in Opera. I'm not sure what causes it, but a simple test page that renames the button does not trigger any issues, however on @Darin's jsfiddle.net example the bug does appear.
It appears to be a redraw bug. I noticed the width of the button changes to match the new label, but the actual label does not change. Also, shifting away from the page and going back, shows the new label instead of the old one.
I did a quick google and could not find anyone else who's come across it.
Here is a workaround that I found:
Perhaps someone can find a cleaner workaround, ideally one that's built into jQuery's
val()
method. But the best solution is obviously for Opera to fix the bug. You should send them an email about it.@Abhi Beckert,实际上有人发现了这个错误 - http://webinterfacetricks.com/opera_submit_bug/
我已经测试过它并且它有效:
是的,这很奇怪,但我希望 Opera 的人很快就能修复它。顺便说一句,你能举报他们吗?
@Abhi Beckert, actually some guy found this bug - http://webinterfacetricks.com/opera_submit_bug/
I've tested it and it works:
Yes, it's pretty odd but I hope Opera guys will fix it soon. Can you report them, btw?
我用js找到了另一种方法:
I found another way with js: