签名垫 - "键入它"不工作

时间:2015-06-02 06:56:07

标签: javascript json html5 visualforce signaturepad

我正在尝试使用this(GitHub),我的"绘制它"按预期工作但是"键入它"功能在我的inputHidden字段中没有给我任何价值。

请参阅VF页面代码和屏幕截图以获取更多信息:

画出 Draw It showing "Value"

输入 Type It is not showing any "Value" in it

VF页码

<apex:page standardController="Case" extensions="signaturepadCaseController">
   <apex:includeScript value="{!URLFOR($Resource.jQuery,'js/jquery-1.6.2.min.js')}" />
   <apex:includeScript value="{!URLFOR($Resource.signature,'/signature/jquery.signaturepad.min.js')}" />
   <apex:includeScript value="{!URLFOR($Resource.signature,'/signature/json2.min.js')}" />
   <apex:stylesheet value="{!URLFOR($Resource.signature,'/signature/jquery.signaturepad.css')}" />

   <form method="post" action="#" class="sigPad">
       <label for="name">Print your name</label>
       <input type="text" name="name" id="name" class="name"/>
       <p class="typeItDesc">Review your signature</p>
       <p class="drawItDesc">Draw your signature</p>
      <ul class="sigNav">
         <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
         <li class="drawIt"><a href="#draw-it">Draw It</a></li>
         <li class="clearButton"><a href="#clear">Clear</a></li>
      </ul>
       <canvas class="pad" width="198" height="55" id="signatureCanvas1"></canvas>
      <div class="sig sigWrapper">
         <div class="typed" id="typeit">             
         </div>

         <canvas class="pad" width="198" height="55" id="signatureCanvas"></canvas>
         <input type="hidden" name="output" class="output" id="hidden"></input>

      </div>
      <input type="button" onclick="saveSignature();" value="Accept" class="btn" target="_parent" />
   </form>
   <script>
     // $('.sigPad').signaturePad(options);
      j$ = jQuery.noConflict();
      var api;
      j$(document).ready(function() {
          api = j$('.sigPad').signaturePad();
      });

      var canvas;
      var canvas1;
      var RecordID = '';

      function saveSignature() {
          canvas = document.getElementById("signatureCanvas");
          canvas1 = document.getElementById("signatureCanvas1");
         // if(j$('#hidden').val() == ''){                     
         //       alert('Please draw your signature');
         // }           
         // else{
              RecordId = '{!caseId}';
              var imgData;

              typeSign = j$('#typeit').text();

              if (typeSign != '') {                  
                  var ctx = canvas1.getContext("2d");
                  ctx.fillText(typeSign, 10, 10);      
              }
              imgData = canvas1.toDataURL("image/jpeg");
              imgData = imgData.split(',')[1];
              console.log('---'+imgData);
              strDataURI = imgData;              
              SignaturePad.signaturepadCaseController.saveSignature(strDataURI, RecordId, handleResult);
         // }
      }

      function handleResult(result) {

          if (result.indexOf('success:true')) {
              //window.top.location = '/{!Case.id}';
          } else {
              alert(result);
          }
      }
   </script>
</apex:page>

0 个答案:

没有答案