SharePoint 将 Javascript 事件添加到 editForm.aspx 页面

Question

I have a Sharepoint list where I want to customize the editForm.aspx page with Javascript.

The problem is that I can't manage to add any events to the controls in that page. I am able to get a reference to my control with this code:

var textarea1;
var objForm = document.forms[0];
function FindField() {
    var title;
    title= $().SPServices.SPGetDisplayFromStatic({ listName: "MyList", columnStaticName: "mycolumn" });
    textarea1 = ChooseFieldByTitle("TextField", title);
}

function ChooseFieldByTitle(TypeField, title) {
    var elem;
    for (idx = 0; idx < objForm.elements.length; idx++) {
        elem = objForm.elements[idx];

        if (elem.id.indexOf(TypeField) != -1 &&
        elem.title == title) {
            return elem;
        }
    }

    return null;
};

This runs fine but I can't attach any event on this control. I have tried the following code (Field is a textArea):

 Field.attachEvent("onchange", myFunction);
 Field.addEventListener("onchange", myFunction, false);
Field.onchange = myFunction() {};

When I change the content of the textArea nothings happen. When I debug with IE developers tools "myFunction" is never called. What am I doing wrong? I have look at SPServices JQuery library but nothing seems to be related to Javascript events.

Does anyone have a clue?

Answer 1

Try to use Jquery, this is a Javascript library that is used a lot. It makes for instance selecting objects easier. If you want to combine it with spservices (or another library), add the following lines in your aspx page under the PlaceHolderMain:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script language="javascript" type="text/javascript" src="/SiteAssets/js/jquery-1.9.0.js"></script>
<script language="javascript" type="text/javascript" src="/SiteAssets/js/jquery.SPServices-0.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/SiteAssets/js/myjavascriptfile.js"></script>

You can then select objects on your page via jquery and immediately tie to the events eg:

$(":input[title$='atitleofsomefield']").keyup(function() {                  
                  // do stuff               
            })

Here is a list of Jquery events: http://api.jquery.com/category/events/

Answer 2

The "onchange" event is fired by a dropdown box when you select a new value. It won't fire for a Textarea. In your case you may want to check the KeyUp event for example, or the Blur event.

Also, you may want to use jQuery or another library to handle the events.

Answer 3

The only way that I have found to accomplish this is via a timer. Look at something like this:

$(document).ready(function() { 
    var initialValue = undefined;
    Field.on('change', function(){
        //If the value has changed, run the function
        if(initialValue==undefined || Field.val()!=initialValue){
            initialValue = Field.val();
            myFunction();
        });
    //Reinitialize the timer 
    checkForChange();
});
//Timer function to throw the 'changed' event
function checkForChange() {
    setTimeout(triggerChange, 1500);
}
//Send the changed event for Field
function triggerChange(){
    Field.trigger('change');
}

And then within your function you do your regular logic.