Javascript 中的 Sharepoint 2013 人员选择器更改事件答案

【问题标题】：Sharepoint 2013 People Picker Change event in JavascriptJavascript 中的 Sharepoint 2013 人员选择器更改事件
【发布时间】：2016-10-18 11:24:32
【问题描述】：

我想要 Javascript 中的人员选择器更改事件，因为如果使用 ClassName 在人员选择器中选择/更改了用户，我必须执行一些任务。

我已经尝试了以下

$(".Assignedname").bind('input propertychange', function() { 
     alert("Onchange event" ); 
})

当我输入任何内容（即文本已更改）时触发，但在人员选择器中选择用户时不会触发。请给我一些解决方案。谢谢

【问题讨论】：

标签： javascript jquery sharepoint sharepoint-2013

【解决方案1】：

一旦人物选取器被初始化，你就可以在 js 字典中访问它，并为选取器的 OnValueChangedClientScript 属性分配一个函数。该函数接受两个参数，其中第二个参数（userInfo）是选取器中用户的集合

var picker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerId + "_TopSpan"];
picker.OnValueChangedClientScript = function (elementId, userInfo) {
    for (var x = 0; x < userInfo.length; x++) {
        console.log(userInfo[x].Key);
    }
    alert("Total number of " + userInfo.length + " users is selected")
};

【讨论】：

关于此方法的警告：我最近遇到了 Microsoft Edge 的计时问题，我的附加事件处理程序的脚本在填充人员选择器对象之前运行，因此代码失败。确保在附加事件处理程序之前初始化 SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerId]。

【解决方案2】：

您需要获取 SharePoint 客户端人员选取器更改事件的选取器 ID。我使用OnUserResolvedClientScript 得到了相同的结果，如下所示。在这里获取选择器 div，我遵循通过人员选择器文本框 id 和 title name 获取它的方法，您可以通过检查元素来获取它。将以下代码放入$(document).ready 函数中。快乐编码

SP.SOD.executeFunc('clientpeoplepicker.js', 'SPClientPeoplePicker', function() {
    var pickerDiv = $("[id^='Employee_x0020_Name'][title='Employee Name']");
    var picker = SPClientPeoplePicker.SPClientPeoplePickerDict[pickerDiv[0].id];
    picker.OnUserResolvedClientScript = function(peoplePickerId, selectedUsersInfo) {
 //It will get the desired display name of the people from picker div, similarly any other property can be accessed via selectedUsersInfo
        var empname = selectedUsersInfo[0].DisplayText;
        console.log(empname);
    }
});

【讨论】：

【解决方案3】：

我使用 jQuery 和 input 字段上的 focusout 事件来实现相同的效果：

$('input[title="Title of my field"]').focusout(function() { 
    alert("Focusout event fired." ); 
    doPeoplePickerStuff();  // function for doing validation 
});

这样做的好处是，只要他们点击其他任何内容，就能够检查该字段的值——除了 Submit 按钮，如果他们在输入字段后立即点击该按钮。我是这样处理的：

新建一个提交按钮并隐藏另一个：

$('input[name*="diidIOSaveItem"]').parent().append('<input type="button" id="btnSubmit" onclick="doValidation()"></input>'); $('input[name*="diidIOSaveItem"]').hide();

为您的新提交按钮创建doValidation()函数：

function doValidation() {

 doPeoplePickerStuff();  // do validation on the field here
 if (personFound == true) {
     $('input[name*="diidIOSaveItem"]').click(); // clicks the real button so it does what it normally would
 }

}

如果您触发事件是为了获取它的值并对其进行验证，请使用：

var personFound = false;
function doPeoplePickerStuff() {
    var personFieldSpan = $('span[id*="OriginalTitleOfMyField"]');
    var personFieldValue = stripExtraTextFromPeoplePicker(personFieldSpan.text());
    if (personFieldValue != "") {  // you could do comparisons against the existing value, too, by getting the original value(s) via REST call
        personFound = true;
    }
}

function stripExtraTextFromPeoplePicker(person) {
    var newPerson = person;
    console.log("Span text: " + newPerson);
    newPerson = newPerson.replace('Title of my field','');
    newPerson = newPerson.replace('Enter a name or email address...','');
    newPerson = newPerson.replace('Enter names or email addresses...','');
    newPerson = newPerson.replace('xSuggestions are available. Use up and down arrows to select.','');
    newPerson = newPerson.replace('Suggestions are available. Use up and down arrows to select.','');
    newPerson = newPerson.replace('\r','');
    newPerson = newPerson.replace('\n','');
    newPerson = newPerson.replace('\t','');
    newPerson = newPerson.trim();
    return newPerson;
}

【讨论】：