3

入力フィールドにアクセント付きの文字を簡単に入力できるように、文字を表示するポップアップ div を表示して、選択してクリックできるようにします。入力フィールドにフォーカスを維持したい（または、フォーカスを奪う操作の後にフォーカスを戻したい）。クリックしてアクセントを入力した後、JavaScript の制御下ではフォーカスが戻りません。Mac Safari と Firefox でテストしましたが、うまくいきません。最終的には、すべてのプラットフォームで動作する必要があります。

どんな助けでも大歓迎です。

デビッド

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" charset="utf-8">
    var showaccentswindow = 0;

    function displayaccents() {
          if (showaccentswindow==0) {
          document.getElementById('accentswindow').style.display='block';
          showaccentswindow=1;
         }
         else
         {
             document.getElementById('accentswindow').style.display='none';
             showaccentswindow=0;
         }
          document.getElementById('inputbox').focus();
      }
       function insertchar(c) {
          /*for inserting accented chars*/
          document.getElementById('inputbox').value=document.getElementById('inputbox').value + c;
          document.getElementById('inputbox').focus();  **// DOESN'T WORK!!!**

          }
    </script>
    <style type="text/css">
    #accentswindow {
        display:none;
        position:absolute;
        top: 50px;
        background-color: #FFF;
        width: 200px;
        border: 2px solid #999;
        z-index: 100;
        left: 150px;
        text-align: left;
        padding-bottom: 20px;
        padding-left: 20px;
    }
    .accentlink {
        background-color: #F3EED7;
        text-align: center;
        display: block;
        float: left;
        height: 22px;
        width: 17px;
        margin-top: 9px;
        margin-right: 3px;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        cursor: pointer;
    }
    </style>
    </head>

    <body onload="document.getElementById('inputbox').focus();">
    <div id="accentswindow" >
      <div class="accentlink" onmousedown="insertchar('À')">À</div>
      <div class="accentlink" onmousedown="insertchar('Û')">Û</div>
      <img src="http://www.revilolang.com/images/closebox.png" width="28" height="26" style="float:right;" onmouseup="displayaccents()"/> </div>
    <input name="" id="inputbox" type="text" />
    <input name="accents" type="button" value="accents"onclick="displayaccents()" />
    </body>
    </html>
4

3 に答える 3

3

mouseup は再びフォーカスを「静止」させるため、リスナーを追加してフォーカスを設定する必要があります

<!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" charset="utf-8">
    var showaccentswindow = 0;

    function displayaccents() {
          if (showaccentswindow==0) {
          document.getElementById('accentswindow').style.display='block';
          showaccentswindow=1;
         }
         else
         {
             document.getElementById('accentswindow').style.display='none';
             showaccentswindow=0;
         }
          document.getElementById('inputbox').focus();
      }
       function insertchar(c) {
          /*for inserting accented chars*/
          document.getElementById('inputbox').value=document.getElementById('inputbox').value + c;
            // DOESN'T WORK!!!**

          }

          function addListeners(){
            document.getElementById('accentswindow').addEventListener("mouseup",function(){
                document.getElementById('inputbox').focus();
            })
          }
    </script>
    <style type="text/css">
    #accentswindow {
        display:none;
        position:absolute;
        top: 50px;
        background-color: #FFF;
        width: 200px;
        border: 2px solid #999;
        z-index: 100;
        left: 150px;
        text-align: left;
        padding-bottom: 20px;
        padding-left: 20px;
    }
    .accentlink {
        background-color: #F3EED7;
        text-align: center;
        display: block;
        float: left;
        height: 22px;
        width: 17px;
        margin-top: 9px;
        margin-right: 3px;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        cursor: pointer;
    }
    </style>
    </head>

    <body onload="addListeners();document.getElementById('inputbox').focus();">
    <div id="accentswindow" >
      <div class="accentlink" onmousedown="insertchar('À')">À</div>
      <div class="accentlink" onmousedown="insertchar('Û')">Û</div>
      <img src="http://www.revilolang.com/images/closebox.png" width="28" height="26" style="float:right;" onmouseup="displayaccents()"/> </div>
    <input name="" id="inputbox" type="text" />
    <input name="accents" type="button" value="accents"onclick="displayaccents()" />
    </body>
    </html>
于 2013-01-29T15:01:58.587 に答える
1

onclick = "document.getElementById('inputbox').focus();"各accentlinkDIVを追加するだけです。

例えば：

<div class="accentlink" onclick = "javascript:document.getElementById('inputbox').focus();" onmousedown="javascript:insertchar('À');">À</div>
于 2013-01-29T15:03:45.017 に答える
1

さて、フォーカスをフォーカス解除（ぼかし）アクションにバインドする必要があります

jQuery があれば、次のようなことができます。

  inputbox.blur(function(){
       inputbox.focus();
  });

プレーンな JavaScript は次のようになります。

  inputbox.onblur=function(){
       inputbox.focus();
  };
于 2013-01-29T14:54:46.523 に答える