如何阻止超出指定容器的所有輸入內容？

好的。這是我想要做的。有一個CMS系統具有相當「javascriptifyed」的UI控件。許多自定義類型的輸入，大量事件，分配給每個等等。我的任務是阻止某些字段發生更改，而不會使其「禁用」（以便數據發送到服務器時不會被忽略）。在加載自己的小部件之前，我無法控制應用程序和其他小部件所做的任何操作。而這個時候，有很多的東西了（分配事件等）如何阻止超出指定容器的所有輸入內容？

當前實現是這樣的：

blockField: function($input) 
    { 
     if ($input.length===0) { return; } 

     $input.prop('readonly', true); 

     // Workaround for calendar widget 
     if ($input.hasClass('date_field')) { 
      $input 
       .removeClass('date_field') 
       .addClass('text-input'); 
     } 

     var $valueCell = this.getFieldContainer($input); 
     $valueCell.on('focus', '*', function(event) { 
      this.error(this.w_code, 'One cannot simply change this field!'); 
      return false; 
     }.bind(this)); 
    },

這並不適用於所有類型的小部件的工作非常好，但是。還有一些其他的缺點。

所以，這個想法是攔截所有事件在他們的方式下降到小部件的容器，並停止他們的傳播更深。

我天真的嘗試是：

 $valueCell.get(0).addEventListener('click', function (e) { 
      e.stopPropagation(); 
      this.error(this.w_code, "Just don't…"); 
      return false; 
     }.bind(this), true);

看來，以防止「點擊」從通過容器（$ valueCell）傳遞;然而，類似的伎倆並不適用於「焦點」事件 - 它是一個鬼鬼祟祟的傢伙。我試圖在$input本身上阻止它，e.preventDefault()和e.stopImmediatePropagation() - 沒有運氣。

是否有人真的解決了這樣的問題？

來源

2017-06-21 pilat

檢查接受的答案，我認爲這是做正確的方式：https://stackoverflow.com/questions/6700297/opera-prevent-input-from -having-focus – Gatsbill

@Gatsbill我已經設置了readOnly。它並不妨礙元素的重點。實際上，它只有表面的意義（輸入改變了它在焦點上的外觀），但是我想避免它。 [屏幕]（https://www.evernote.com/l/ACg2Su1rep5NBbjgBDYfMcd6pGmxOLbgmpsB/image.png） – pilat

有一個CSS屬性：'pointer-events'，它有助於防止字段變得「聚焦」。

下面是最終實現：

function blockFieldsInside($container) 
{ 
    $input = $container.find('input,textarea,select'); 

    // Make all controls read-only: 
    $input.prop('readonly', true); 

    // On the "capture" leg of event bubbling (it's important) 
    // we stop all intercepted clicks 
    $container.get(0).addEventListener('click', function (e) { 
    e.preventDefault(); // probably overkill (returning false anyway) 
    e.stopPropagation(); // probably overkill (returning false anyway) 
    alert('No.'); 

    return false; 
    }, true); 

    // This fixes drop-downs from opening via keyboard: 
    $container.on('keydown keyup', '*', function() { 
    return false; 
    }); 

    // Don't "tab" onto blocked fields: 
    $input.each(function() { 
    $(this).prop('tabindex', -1); 
    }); 

    // The final accord: 
    $('*', $container).css({ pointerEvents: 'none' }); 
}

來源

2017-06-27 19:09:59 pilat

如何阻止超出指定容器的所有輸入內容？

回答

相關問題