2013-11-02 24 views
0

我在我的窗體上使用bootstrap-wysihtml5編輯器創建iframe元素。Bootstrap點頭驗證插件和Iframs

<iframe class="wysihtml5-sandbox" width="0" height="0" frameborder="0" security="restricted" allowtransparency="true" marginwidth="0" marginheight="0" name="for_nod" src="#" style="display: inline-block; background-color: rgb(255, 255, 255); border-collapse: separate; border-color: rgb(204, 204, 204); border-style: solid; border-width: 1px; clear: none; float: none; margin: 0px 0px 10px; outline: 0px none rgb(0, 0, 0); outline-offset: 0px; padding: 4px 6px; position: static; top: auto; left: auto; right: auto; bottom: auto; z-index: auto; vertical-align: middle; text-align: start; -moz-box-sizing: content-box; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.075) inset; border-radius: 4px 4px 4px 4px; width: 750px; height: 300px;"> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <link href="/js/plug-ins/bootstrap-wysihtml5/rtl/rtl-editor.css" rel="stylesheet"> 
    <style type="text/css"> 
    </head> 
    <body class="wysihtml5-editor" contenteditable="true" spellcheck="true" style="background-color: rgb(255, 255, 255); color: rgb(85, 85, 85); cursor: text; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; letter-spacing: normal; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: optimizelegibility; word-break: normal; word-wrap: break-word; word-spacing: 0px;"> 
     simple text 
     <br> 
    </body> 
</html> 
</iframe> 

我需要驗證的IFRAME內部的體元件使用的Nod驗證插件不爲空。內容()。find(「body」)但是可以使用$(「iframe」)。content()。if(「body」)獲得iframe對象。但是,驗證邏輯將不起作用。

我已經嘗試設置提交按鈕的onclick事件處理程序手動處理iframe的驗證,問題是,如果通過點頭使用的規則通過,則自定義驗證功能不會有任何影響,如果它返回真或錯誤的值。

無論如何要解決這個問題?

回答

0

我已經通過創建非顯示的textarea元素,然後使用自定義事件功能來解決我的問題,以便偵聽iframe正文的更改事件,並將隱藏的textarea內容細分爲相同的內容。 點頭規則已應用於隱藏的文本區域。

我不知道這是否是完美的解決方案,但我沒有選擇:)目前。

定製contentchange事件代碼

/* 
* custom-change-event 
* 
* This custom event is used for those elements 
* that has no support for default change event 
* like : body , div ,span, .... 
* 
* 
*/ 

    var interval; 

    jQuery.fn.contentchange = function (fn) { 
     return this.on('contentchange', fn); 
    }; 

    jQuery.event.special.contentchange = { 
     setup: function (data, namespaces, eventHandle) { 
      var self = this, 
       $this = $(this), 
       $originalContent = $this.text(); 
      interval = setInterval(function() { 
       if ($originalContent != $this.text()) { 
        $originalContent = $this.text(); 
        jQuery.event.special.contentchange.handler.call(self); 
       } 
      }, 500); 
     }, 
     teardown: function (namespaces) { 
      clearInterval(interval); 
     }, 
     handler: function (event) { 
      $(this).trigger('contentchange'); 
     } 
    };