更改事件時輸入元素的樣式邊框

我使用PrimeFaces作爲JSF組件庫，並嘗試實現基本和機制，允許用戶查看頁面上的哪些輸入元素已更改。我們的想法是勾onchange事件，並按照以下步驟設置不同的邊框顏色用javascript：更改事件時輸入元素的樣式邊框

function setChangedStyle(element) { 
    PrimeFaces.info('Trying to set border on element ' + element); 
    var input = document.getElementById(element.id); 
    if (input != undefined) { 
     var borderStyle = "1px solid #eab069"; 
     input.style.border = borderStyle; 
     PrimeFaces.info('Set border style to ' + borderStyle); 
    } else { 
     PrimeFaces.info('Element is undefinded'); 
    } 
}

它適用於輸入要素細如字段。

<p:inputText id="justAnIdForAField" onchange="setChangedStyle(this)" value="#{someBean.aField}" />

這裏的元素的呈現的輸出：

<p:selectBooleanCheckbox/>

<div id="someForm:someBooleanInput" class="ui-chkbox ui-widget"> 
     <div class="ui-helper-hidden-accessible"> 
      <input id="someForm:someBooleanInput_input" 
       name="someForm:someBooleanInput_input" type="checkbox" 
       onchange="setChangedStyle(this);" /> 
     </div> 
     <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"> 
      <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> 
     </div> 
    </div>

<p:selectOneMenu/>

<tr class="ui-widget-content" role="row"> 
    <td role="gridcell" class="ui-panelgrid-cell"><label 
     id="someForm:j_idt68" class="ui-outputlabel ui-widget" 
     for="someForm:someSelectMenuInput_focus">SelectOne Input</label></td> 
    <td role="gridcell" class="ui-panelgrid-cell"><div 
      id="someForm:someSelectMenuInput" 
      class="ui-selectonemenu ui-widget ui-state-default ui-corner-all"> 
    <div class="ui-helper-hidden-accessible"> 
     <input id="someForm:someSelectMenuInput_focus" 
      name="someForm:someSelectMenuInput_focus" type="text" 
      autocomplete="off" /> 
    </div> 
    <div class="ui-helper-hidden-accessible"> 
     <select id="someForm:someSelectMenuInput_input" 
      name="someForm:someSelectMenuInput_input" tabindex="-1" 
      onchange="setChangedStyle(this);"> 
      <option value="" selected="selected">One</option> 
      <option value="" selected="selected">Two</option> 
      <option value="" selected="selected">Three</option> 
     </select> 
    </div> 
    <label id="someForm:someSelectMenuInput_label" 
     class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label> 
    <div 
     class="ui-selectonemenu-trigger ui-state-default ui-corner-right"> 
     <span class="ui-icon ui-icon-triangle-1-s ui-c"></span> 
    </div> 
    <div id="someForm:someSelectMenuInput_panel" 
     class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"> 
     <div class="ui-selectonemenu-items-wrapper" style="height: auto"> 
      <ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset"> 
       <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="One">One</li> 
       <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Two">Two</li> 
       <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Three">Three</li> 
      </ul> 
     </div> 
    </div> 
    </div> 
     <script id="someForm:someSelectMenuInput_s" type="text/javascript">$(function(){PrimeFaces.cw("SelectOneMenu","widget_someForm_someSelectMenuInput",{id:"someForm:someSelectMenuInput",widgetVar:"widget_someForm_someSelectMenuInput"});});</script></td> 
</tr>

<p:calendar/>

<td role="gridcell" class="ui-panelgrid-cell"> 
    <span id="someForm:someCalendarInput"> 
    <input id="someForm:someCalendarInput_input" name="someForm:someCalendarInput_input" type="text" 
      class="ui-inputfield ui-widget ui-state-default ui-corner-all" onchange="setChangedStyle(this)" /> 
    </span>

而這裏的整個頁面的HTML輸出：

<table id="someForm:j_idt65" class="ui-panelgrid ui-widget" role="grid"> 
<tbody> 
    <tr class="ui-widget-content" role="row"> 
     <td role="gridcell" class="ui-panelgrid-cell"> 
      <label id="someForm:j_idt66" class="ui-outputlabel ui-widget" 
       for="someForm:someInput">Input</label> 
     </td> 
     <td role="gridcell" class="ui-panelgrid-cell"> 
      <input id="someForm:someInput" name="someForm:someInput" type="text" 
       onchange="setChangedStyle(this)" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" /> 
       <script id="someForm:someInput_s" type="text/javascript">PrimeFaces.cw("InputText","widget_someForm_someInput",{id:"someForm:someInput",widgetVar:"widget_someForm_someInput"});</script> 
     </td> 
    </tr> 
    <tr class="ui-widget-content" role="row"> 
     <td role="gridcell" class="ui-panelgrid-cell"> 
      <label id="someForm:j_idt67" class="ui-outputlabel ui-widget" 
       for="someForm:someBooleanInput_input">Boolean Input</label> 
     </td> 
     <td role="gridcell" class="ui-panelgrid-cell"> 
      <div id="someForm:someBooleanInput" class="ui-chkbox ui-widget"> 
       <div class="ui-helper-hidden-accessible"> 
        <input id="someForm:someBooleanInput_input" name="someForm:someBooleanInput_input" type="checkbox" onchange="setChangedStyle(this);" /> 
       </div> 
       <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"> 
        <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span> 
       </div> 
      </div> 
      <script id="someForm:someBooleanInput_s" type="text/javascript">PrimeFaces.cw("SelectBooleanCheckbox","widget_someForm_someBooleanInput",{id:"someForm:someBooleanInput",widgetVar:"widget_someForm_someBooleanInput"});</script> 
     </td> 
    </tr> 
    <tr class="ui-widget-content" role="row"> 
     <td role="gridcell" class="ui-panelgrid-cell"> 
      <label id="someForm:j_idt68" class="ui-outputlabel ui-widget" 
       for="someForm:someSelectMenuInput_focus">SelectOne Input</label> 
     </td> 
     <td role="gridcell" class="ui-panelgrid-cell"> 
     <div id="someForm:someSelectMenuInput" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all"> 
      <div class="ui-helper-hidden-accessible"> 
       <input id="someForm:someSelectMenuInput_focus" name="someForm:someSelectMenuInput_focus" type="text" autocomplete="off" /> 
      </div> 
      <div class="ui-helper-hidden-accessible"> 
       <select id="someForm:someSelectMenuInput_input" name="someForm:someSelectMenuInput_input" tabindex="-1" onchange="setChangedStyle(this);"> 
        <option value="" selected="selected">One</option> 
        <option value="" selected="selected">Two</option> 
        <option value="" selected="selected">Three</option> 
       </select> 
      </div> 
      <label id="someForm:someSelectMenuInput_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">&nbsp;</label> 
      <div class="ui-selectonemenu-trigger ui-state-default ui-corner-right"> 
       <span class="ui-icon ui-icon-triangle-1-s ui-c"></span> 
      </div> 
      <div id="someForm:someSelectMenuInput_panel" class="ui-selectonemenu-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"> 
       <div class="ui-selectonemenu-items-wrapper" style="height: auto"> 
        <ul class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset"> 
         <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="One">One</li> 
         <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Two">Two</li> 
         <li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Three">Three</li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <script id="someForm:someSelectMenuInput_s" type="text/javascript">$(function(){PrimeFaces.cw("SelectOneMenu","widget_someForm_someSelectMenuInput",{id:"someForm:someSelectMenuInput",widgetVar:"widget_someForm_someSelectMenuInput"});});</script></td> 
    </tr> 
    <tr class="ui-widget-content" role="row"> 
     <td role="gridcell" class="ui-panelgrid-cell"> 
      <label id="someForm:j_idt72" class="ui-outputlabel ui-widget" 
       for="someForm:someCalendarInput_input">Calendar Input</label> 
     </td> 
     <td role="gridcell" class="ui-panelgrid-cell"> 
      <span id="someForm:someCalendarInput"> 
       <input id="someForm:someCalendarInput_input" name="someForm:someCalendarInput_input" type="text" class="ui-inputfield ui-widget ui-state-default ui-corner-all" onchange="setChangedStyle(this)" /> 
      </span> 
      <script id="someForm:someCalendarInput_s" type="text/javascript">$(function(){PrimeFaces.cw("Calendar","widget_someForm_someCalendarInput",{id:"someForm:someCalendarInput",widgetVar:"widget_someForm_someCalendarInput",popup:true,locale:"de",dateFormat:"dd.mm.y",showOn:"button"});});</script> 
     </td> 
    </tr> 
</tbody>

儘管如此，我與其他組件努力得到的一切工作。

<p:selectBooleanCheckbox/>和<p:selectOneMenu/>：onchange事件似乎被解僱，但也有邊框的樣式沒有明顯的變化。
<p:calendar/>：onchange事件似乎沒有被解僱（沒有日誌條目），所以根本沒有改變。

我從來沒有碰到else - 記錄'Element is undefined'的陳述。

有沒有人請讓我知道如果我做錯了什麼，我需要開始調整。

非常感謝。

來源

2015-02-05 fatdevelops

看看生成的兩個選擇的xhtml。 html輸入是隱藏的助手。你必須把你的邊框放在其他html元素上 – Kukeltje 2015-02-05 12:58:01

你可以看看選擇元素的html代碼是什麼，並將其添加到問題中？ – 2015-02-05 13:10:27

需要找出生成元素的事件，比如日曆控件，或者嘗試直接給元素添加邊框以查看它是否有效 – 2015-02-05 14:47:06

以下Javascript函數遍歷DOM樹並操縱相應輸入元素的邊界。

該腳本適用於PrimeFaces 5.1，JSF 2.2。（Mojarra）蜻蜓8.2。

/** 
* Changes the border color of an input element. 
* 
* @param element 
*/ 
function setChangedStyle(element) { 
var borderStyle = "1px solid #eab069"; 

PrimeFaces.info('Element calling this function ' + element); 
var input = document.getElementById(element.id); 

if (input != undefined) { 
    if (input.getAttributeNode("type") != undefined) { 
     PrimeFaces.info('TYPE ' + input.getAttributeNode("type").value); 

     var inputType = input.getAttributeNode("type").value; 
     if (inputType == 'text') { 
      // Set border of inputText 
      input.style.border = borderStyle; 

     } else if (inputType == 'checkbox') { 
      // If we deal with a checkbox, we expect the following: 
      // the input element itself is located in a hidden div that is 
      // located in a parent div. The parent div has two child 
      // elements. 
      // The border needs to be set on the span element that resides 
      // inside the div next to the hidden div. 

      // Set border of checkbox 
      input.parentNode.parentNode.childNodes.item(1).childNodes.item(0).style.border = borderStyle; 
     } else { 
      PrimeFaces.info('Unhandled input type'); 
     } 
    } else { 
     // Different input component 
     if ("ui-selectonemenu".indexOf(input.parentNode.parentNode.getAttributeNode("class").value)) { 
      // Set border of the selectOneMenu 
      input.parentNode.parentNode.style.border = borderStyle; 
     } else { 
      PrimeFaces.info('Unhandled input type'); 
     } 
    } 
} else { 
    PrimeFaces.info('Element is undefinded'); 
}

來源

2015-02-16 14:33:40 fatdevelops

更改事件時輸入元素的樣式邊框

回答

相關問題