"\" char breaks inline edit functionality on visualforce page

Question

I am facing with the problem, that when user inserts into text field "\" char and this field has inline edit functionality it breaks the whole page, table structure breaks also if this field is inside some pageBlockTable

Part of vf page:

    <apex:pageBlockTable id="tabTable" value="{!tabs}" var="tab">
          <apex:column headerValue="Name" >
            <apex:outputField value="{!tab.Name}" rendered="{!tab.Id != null}" >
                <apex:inlineEditSupport event="ondblClick" />
            </apex:outputField>
            <apex:inputField value="{!tab.Name}" rendered="{!tab.Id == null}" />
          </apex:column> 

I added some methods into controller, which remove this char, but as ui is broken it doesnt refresh the page. So user should refresh it manually or click "Save" again.

Clean method:

public static SObject cleanRecordStringFields(SObject record) {

    if (record != null) {

        List<DescribeFieldResult> stringFields = getStringFieldsOfRecord(record);

        //sanitize string fields
        for (DescribeFieldResult field : stringFields) {

            String fieldValue = (String) record.get(field.getName());

            if ( String.isNotBlank( fieldValue ) ) {

                String sanitizedString = sanitizeStringValue(fieldValue);

                //check field's max length
                sanitizedString = sanitizedString.length() > field.getLength() 
                                    ? sanitizedString.substring(0, field.getLength()) : sanitizedString; 

                record.put( field.getName(), sanitizedString );

            }

        }

    }

    return record;
} 

Any beautiful solution to this situation? I thought to add some field validation in controller, but as we have a lot of objects with text fields and i cannot use addError() with dynamic apex, its a pain to add to each field validation and maintain this in future :(

Answer 1

If the problem occurs somewhere during the roundtrip between the client and server, then validating on the server side may be too late. Here's an example of how you could do it via Javascript. You should be able to package this up in a Static Resource and include it anywhere you use inlineEditSupport.

(function (D, w) {
    "use strict";
    D.addEventListener('DOMContentLoaded', function () {
        var i, inputs = D.getElementsByTagName('input'),
            sanitize = function (event) {
                if (String.fromCharCode(event.which) == '\\') {
                    event.preventDefault();
                }
            },
            observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    var nodes = mutation.addedNodes;
                    if (nodes.length > 0 && nodes[0].tagName == 'INPUT') {
                        nodes[0].addEventListener('keypress', sanitize);
                    }
                });
            });
        observer.observe(D.body, { childList: true, subtree: true });
    });
}(document, window));

Answer 2

The final solution is:

(function (D, w) {
    "use strict";
    D.addEventListener('DOMContentLoaded', function () {
            var sanitize = function (event) {
                event.target.value = event.target.value.replace(/\\/g, '');                 
            },
            observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    var nodes = mutation.addedNodes;
                    if (nodes.length > 0 && (nodes[0].tagName == 'INPUT' || nodes[0].tagName == 'TEXTAREA') ) {
                        nodes[0].addEventListener('input', sanitize); 
                    }
                });
            });
        observer.observe(D.body, { childList: true, subtree: true });
    });
}(document, window));