javascript - 使用 JQuery 和 SharePoint 制作 FormBody 收缩和展开

Question

我正在 Sharepoint 中创建一个表单。我有一个用于文本框的 ms-FormBody。我希望用户能够双击该框以展开该框，如果他们再次双击，它会收缩回来。同样，这是在 SharePoint 中。

编辑:感谢@Thriggle 的一些帮助，我非常接近这个元素的目标。现在的问题是，无论您键入什么，都只会停留在一行上(也许是 t ext wrapping？)。此外，文本框实际上并没有占用更少的空间(这没什么大不了的，但是如果您无论如何都能想到让其余的框随着此框的大小调整而移动)，我想知道是否有一种方法可以程序启动时框会变小。

Answer 1

根据您的屏幕截图，我假设您使用的是 Nintex Forms。

对于纯文本多行字段

以下内容适用于纯文本多行字段，但不适用于富文本或增强型富文本字段(两者均不由普通文本区域元素表示)。

在您的表单设置中，在自定义 JavaScript 部分，您可以添加以下代码:

ExecuteOrDelayUntilScriptLoaded(function(){setTimeout(checkFieldExists,1000);},"sp.js");

function checkFieldExists(){
    // Nintex forms load slowly; we'll hold off on running the code
    // until we're able to access the element through the DOM.
    var field = document.getElementById(DescriptionID);
    if(field){
        // The field exists, time to attach an event listener.
        addExpansionToggleEvent(field);
    }else{
        // Wait a second, then check again.
        setTimeout(checkFieldExists,1000);
    }
}

function addExpansionToggleEvent(field){
    field.style.height = ""; // remove the default height=100%
    field.ondblclick = function(){
        var rows = field.getAttribute("rows"); 
        field.setAttribute("rows",+rows < 10 ? 10 : 1);
    };
}

这是假设您将 DescriptionID 的客户端 ID 添加到要切换的纯文本多行字段，如屏幕截图所示。

对于富文本多行字段

富文本字段(奇怪地)由 iframe 而不是 textarea 元素表示。

可以将以下代码添加到您的自定义 JavaScript 部分，以在双击富文本字段时提供扩展/收缩行为，但请注意，这不会重新调整其他控件在表单上的布局方式以说明字段的新大小...所以它不是特别有用。

ExecuteOrDelayUntilScriptLoaded(function(){setTimeout(checkFieldExists,1000);},"sp.js");
function checkFieldExists(){
    var iframes = document.querySelectorAll("iframe[title=\"Rich Text Editor\"]");
    if(iframes.length > 0){
        addExpansionToggleEvent(iframes);
    }else{
        setTimeout(checkFieldExists,1000);
    }
}
function addExpansionToggleEvent(iframes){
    for(var i = 0, len = iframes.length; i < len; i++){
        var body = iframes[i].contentDocument.querySelector("body");
        (function(container){
            body.ondblclick = function(){
                container.height = +(container.height) < 140 ? 140 : 30; 
            };
        })(iframes[i]);
    }
}

同样，此代码专门针对富文本字段，不适用于纯文本或增强型富文本字段。