SharePoint Short #5
If you have a requirement to disable the PeopleEditor in SharePoint through JavaScript, the following script will do this for you:
function togglePeopleEditor(editor, enable) { // Disables the control but still allows the user to type into it. editor.attr('disabled', enable ? '' : 'disabled'); // Previous control is div element, used to control the textarea control var editorDiv = editor.find('textarea').prev(); // When not enabling, ensure text shown in people picker has been resolved, otherwise clear it if (!enable) { var entityData = editorDiv.find('#divEntityData'); if (entityData != undefined) { if (entityData.attr('isresolved') == undefined || entityData.attr('isresolved') == 'False') { editorDiv.html(' '); } } // Hide any error messages editor.find('.ms-error').css('display', 'none'); } // Hide any errors from view when the people editor is disabled if (!enable) { editor.find('.ms-error').css('display', 'none'); } // Set text colour to Grey so that the control appears disabled in Firefox editorDiv.css('color', enable ? 'windowtext' : 'Grey'); editorDiv.attr('contentEditable', false); // Ensure all child span elements display correct text colour and disable or enable content editing editorDiv.find('span').each(function () { $(this).css('color', enable ? 'windowtext' : 'Grey'); $(this).attr('contentEditable', enable); }); // The following will enable or disable the 'Check Name' and 'Browse' links. editor.find('a').attr('disabled', enable ? '' : 'disabled').css('cursor', enable ? 'pointer' : 'default'); // Toggle the child anchor element event handlers editor.find('a').each(function () { if (enable) { if ($(this).attr('onclick') == null) this.onclick = $(this).data('onclick_data'); // Restore previously deleted click event } else { if ($(this).data('onclick_data') == undefined) $(this).data('onclick_data', this.onclick); // Store click data before removing the current event $(this).removeAttr('onclick'); } }); } |
Important aspects of the script are:
- Setting the contenteditable attribute of the div (id is postfixed _upLevelDiv) that immediately precedes the textarea control to false will disable the control and not allow the user to type directly into it.
- Removing un-resolved text from the people picker when disabling – this stops validation errors
- Removing the onclick event handlers when disabled and restoring when re-enabling – this is only required for Firefox as other browsers do not fire the event as the parent control is set to disabled.
It should be noted that the people picker control this script assumes only one user or group, if allowing more you’ll need to update the logic for clearing the content when disabling to handle multiple entities.