「フォーカスがあたったらボタンを表示して、ボタンが押されるまで表示し続ける」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

フォーカスがあたったらボタンを表示して、ボタンが押されるまで表示し続ける

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>フォーカスがあたったらボタンを表示して、ボタンが押されるまで表示し続ける</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  9. <script type="text/javascript">
  10.   $(document).ready(function () {
  11.     ko.applyBindings(new ViewModel());
  12.   });
  14.   function ViewModel() {
  15.     var self = this;
  17.     self.focusInput = ko.observable(false);
  18.     self.inputData = ko.observable("");
  20.     self.activeDataArea = ko.observable(false);
  21.     self.addDataArea = ko.computed(function() {
  22.       if (self.focusInput() == true)
  23.       {
  24.         // フォーカスがあたったときactiveDataArea()とtrueにしておくフォーカスが外れても問題ないように。
  25.         self.activeDataArea(true);
  26.         return true;
  27.       }
  28.       else if (self.activeDataArea() == true)
  29.       {
  30.         // フォーカスが外れ、activeDataArea()がtrueのとき
  31.         return true;
  32.       }
  33.       return false;
  34.     }, self);
  36.     self.addData1 = function()
  37.     {
  38.       self.inputData("丸ごとしまうま");
  39.       self.activeDataArea(false);
  40.     }
  42.     self.addData2 = function()
  43.     {
  44.       self.inputData("ねぎま");
  45.       self.activeDataArea(false);
  46.     }
  48.   }
  49. </script>
  51. <style type="text/css">
  52. .inData
  53. {
  54.   position:absolute;
  55.   top:0;
  56.   left:20px;
  57.   width:200px;
  58.   padding:10px;
  59.   background:#f0f0f0;
  60.   border:1px solid #ccc;
  61.   cursor:pointer;
  62. }
  63. </style>
  65. </head>
  66. <body>
  68. <h1>フォーカスがあたったらボタンを表示して、ボタンが押されるまで表示し続ける</h1>
  70. <input type="text" data-bind="hasfocus: focusInput, value: inputData" /><br />
  71. <div style="position:relative;top:0;left:0;background:red;" data-bind="visible: addDataArea">
  72.   <button data-bind="event: {click: addData1}, clickBubble: false">「丸ごとしまうま」を追加</button>
  73.   <button data-bind="event: {click: addData2}, clickBubble: false">「ねぎま」を追加</button>
  74. </div>
  75. <input type="text" /><br />
  77. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  78. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  79. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  80. </div>
  82. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  83. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  84. </div>
  86. </body>
  87. </html>