locked
Customizing AD FS placeholder input fields RRS feed

  • Question

  • Hi all,

    I'm customizing the AD FS sign in page for a client and running into something I haven't seen. I'm replace the "someone@example.com" placeholder in the username field with just "Username".. I have separate code in onload.js to add the domain suffix.

    This is the code in onload.js:

    // Customize username input field
    
    function UpdatePlaceholders() {
        var userName;
        if (typeof Login != 'undefined'){
            userName = document.getElementById(Login.userNameInput) 
        }
        if (typeof UpdatePassword != 'undefined'){
            userName = document.getElementById(UpdatePassword.userNameInput);
        }
        if (typeof userName != 'undefined'){
            userName.setAttribute("placeholder","Username");
        }
    }
     
    document.addEventListener("DOMContentLoaded", function(){
      // Handler when the DOM is fully loaded
      UpdatePlaceholders()
    });

    In a browser it seems to work as expected:

    However, when you open an Excel document from a SharePoint library, not so much:

    Interestingly, when you click in the username field, and then click out, it then overlays both:

    Any thoughts or suggestions?

    Thanks,

    Charles


    This posting is provided AS IS with no warranties,and confers no rights. Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as Answer” if a marked post does not actually answer your question. This can be beneficial to other community members reading the thread

    Tuesday, August 8, 2017 9:49 PM

Answers

  • There is a JavaScript that changes the way the page is rendered depending on the version of the browser. I am guessing that this script makes the page falls back in the days where the placeholder was not a supported property when it is rendered through Office applications.

    Example with the password field with the UserAgentString of IE11:

    <div id="passwordArea">
       <label class="hidden" id="passwordInputLabel" for="passwordInput">Kennwort</label>
       <input name="Password" tabindex="2" class="text fullWidth" id="passwordInput" type="password" placeholder="Kennwort" autocomplete="off">
    </div>


    The same page with the UserAgentString of IE8:

    <div id="passwordArea" style=";">
       <label class="hidden" id="passwordInputLabel" for="passwordInput">Kennwort</label>
       <input tabindex="-1" class="text fullWidth hint" style="border-color: transparent; ;" type="text" readonly=""><input name="Password" tabindex="2" class="text fullWidth" id="passwordInput" style="background: none; ;" type="password" placeholder="" autocomplete="off">
    </div>


    In the default javascript of the page, there are a bunch of function already governing the switch:

    InputUtil.makePlaceholder = function (input) {
        var ua = navigator.userAgent;
    
        if (ua != null && 
            (ua.match(/MSIE 9.0/) != null || 
             ua.match(/MSIE 8.0/) != null ||
             ua.match(/MSIE 7.0/) != null)) {
            var node = document.getElementById(input);
            if (node) {
                var placeholder = node.getAttribute("placeholder");
                if (placeholder != null && placeholder != '') {
                    var label = document.createElement('input');
                    label.type = "text";
                    label.value = placeholder;
                    label.readOnly = true;
                    label.style.position = 'absolute';
                    label.style.borderColor = 'transparent';
                    label.className = node.className + ' hint';
                    label.tabIndex = -1;
                    label.onfocus = function () { this.nextSibling.focus(); };
    
                    node.style.position = 'relative';
                    node.parentNode.style.position = 'relative';
                    node.parentNode.insertBefore(label, node);
                    node.onkeyup = function () { InputUtil.showHint(this); };
                    node.onblur = function () { InputUtil.showHint(this); };
                    node.style.background = 'transparent';
    
                    node.setAttribute("placeholder", "");
                    InputUtil.showHint(node);
                }
            }
        }
    };

    And

    InputUtil.updatePlaceholder = function (input, placeholderText) {
        var node = document.getElementById(input);
        if (node) {
            var ua = navigator.userAgent;
            if (ua != null &&
                (ua.match(/MSIE 9.0/) != null ||
                ua.match(/MSIE 8.0/) != null ||
                ua.match(/MSIE 7.0/) != null)) {
                var label = node.previousSibling;
                if (label != null) {
                    label.value = placeholderText;
                }
            }
            else {
                node.placeholder = placeholderText;
            }
        }
    };

    You have to piggy back on the same logic if you want your rendering to be consistent.


    Note: Posts are provided “AS IS” without warranty of any kind, either expressed or implied, including but not limited to the implied warranties of merchantability and/or fitness for a particular purpose.

    Monday, February 26, 2018 3:10 PM

All replies

  • Just curious if you found a solution. I'm experiencing the same problem.
    Tuesday, February 20, 2018 8:24 PM
  • There is a JavaScript that changes the way the page is rendered depending on the version of the browser. I am guessing that this script makes the page falls back in the days where the placeholder was not a supported property when it is rendered through Office applications.

    Example with the password field with the UserAgentString of IE11:

    <div id="passwordArea">
       <label class="hidden" id="passwordInputLabel" for="passwordInput">Kennwort</label>
       <input name="Password" tabindex="2" class="text fullWidth" id="passwordInput" type="password" placeholder="Kennwort" autocomplete="off">
    </div>


    The same page with the UserAgentString of IE8:

    <div id="passwordArea" style=";">
       <label class="hidden" id="passwordInputLabel" for="passwordInput">Kennwort</label>
       <input tabindex="-1" class="text fullWidth hint" style="border-color: transparent; ;" type="text" readonly=""><input name="Password" tabindex="2" class="text fullWidth" id="passwordInput" style="background: none; ;" type="password" placeholder="" autocomplete="off">
    </div>


    In the default javascript of the page, there are a bunch of function already governing the switch:

    InputUtil.makePlaceholder = function (input) {
        var ua = navigator.userAgent;
    
        if (ua != null && 
            (ua.match(/MSIE 9.0/) != null || 
             ua.match(/MSIE 8.0/) != null ||
             ua.match(/MSIE 7.0/) != null)) {
            var node = document.getElementById(input);
            if (node) {
                var placeholder = node.getAttribute("placeholder");
                if (placeholder != null && placeholder != '') {
                    var label = document.createElement('input');
                    label.type = "text";
                    label.value = placeholder;
                    label.readOnly = true;
                    label.style.position = 'absolute';
                    label.style.borderColor = 'transparent';
                    label.className = node.className + ' hint';
                    label.tabIndex = -1;
                    label.onfocus = function () { this.nextSibling.focus(); };
    
                    node.style.position = 'relative';
                    node.parentNode.style.position = 'relative';
                    node.parentNode.insertBefore(label, node);
                    node.onkeyup = function () { InputUtil.showHint(this); };
                    node.onblur = function () { InputUtil.showHint(this); };
                    node.style.background = 'transparent';
    
                    node.setAttribute("placeholder", "");
                    InputUtil.showHint(node);
                }
            }
        }
    };

    And

    InputUtil.updatePlaceholder = function (input, placeholderText) {
        var node = document.getElementById(input);
        if (node) {
            var ua = navigator.userAgent;
            if (ua != null &&
                (ua.match(/MSIE 9.0/) != null ||
                ua.match(/MSIE 8.0/) != null ||
                ua.match(/MSIE 7.0/) != null)) {
                var label = node.previousSibling;
                if (label != null) {
                    label.value = placeholderText;
                }
            }
            else {
                node.placeholder = placeholderText;
            }
        }
    };

    You have to piggy back on the same logic if you want your rendering to be consistent.


    Note: Posts are provided “AS IS” without warranty of any kind, either expressed or implied, including but not limited to the implied warranties of merchantability and/or fitness for a particular purpose.

    Monday, February 26, 2018 3:10 PM