4

コンテンツの編集可能なdiv内にラジオボタンがあります。しかし、ラジオボタンをクリックしても、FirefoxとIEでは何も起こりません。ただし、Chromeでは正常に機能します。

FirefoxとIEでこれを機能させるにはどうすればよいですか？

コードはhttp://jsbin.com/uqexoy/2/editで入手でき、次のようになります。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div contentEditable="true"><input type="radio" />ere er er er re </div>
</body>
</html>
4

2 に答える 2

3

これは、IE8、IE9、Chrome、Firefoxで動作することがテストされています。かなり奇妙なことですが、Operaでも機能します。Operaではinput field（この場合はradio button）ステータスがchecked（JavaScriptでテスト済みalert(this.checked);）に変更されますが、それを反映して外観は変更されません。考えられる回避策については、以下を参照してください。

問題のあるブラウザの大部分の解決策は、編集不可能なコンテンツを次のspanようにラップすることです。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div contentEditable="true">
    <span contentEditable="false">
      <input type="radio" />
    </span>ere er er er re 
  </div>
</body>
</html>

radio buttonOperaの部分に関しては、 「selected状態」の変更を反映しないという事実は、CSSセレクターで2つの異なる状態をスタイル設定し、これら2つのCSSルールをOperaブラウザーにのみ適用することでオーバーライドできるはずです。Operaはそのようなプロパティの変更を受け入れるようですが、これは私がテストした他のすべてのブラウザでは何の違いもありません。これは、Opera固有のCSSルールを適用して状態の変更を反映する方法かもしれません。次に例を示します。input[type="radio"]input[type="radio"]:checkedbackground-colorradio buttonschecked

input[type="radio"]:checked {background-color:gray;}

他のブラウザは、このCSSルールを単に無視します。適用できるもう1つの許容可能なOpera固有のルールはですがborder、この場合、値がないことに制限されていることがわかります。

于 2013-01-28T04:19:52.687 に答える
0

DOMElementのcontentEditableプロパティを次のように使用します

 <div onClick="this.contentEditable='true';"><input type="radio" />
    This is test
 </div>
于 2013-01-28T04:13:43.773 に答える