Bootstrap X-editable, clear button for textarea

Question

I am wondering if there is any possibility to use the clear button for input type textarea in bootstrap-editable as it is in input type="text" by set of property clear: true

Or do I have to use some workaround?

Answer 1

I can't find any way, I think the reason it's because a textarea is more difficult to style because it's resizable and with more lines.

Without modifying the original code I managed a little hack.

If the clear option is true, I use the shown event to add a custom button the to the plugin and attach a custom event to clear the textarea content.

Code:

$('#dob').on('shown', function (e, editable) {
    if (arguments.length != 2) return
    if (!editable.input.$input.closest('.control-group').find('.editable-input >textarea').length > 0 || !editable.options.clear || editable.input.$input.closest('.control-group:has(".btn-clear")').length > 0) return

    editable.input.$input.closest('.control-group').find('.editable-buttons').append('<br><button class="btn btn-clear"><i class="icon-trash"></i></button>');
});

$('body').on('click', '.editable-buttons > .btn-clear', function (e) {
    $(this).closest('.control-group').find('.editable-input >textarea').val('');
    return false
});

Demo: http://jsfiddle.net/IrvinDominin/8akfp/

Answer 2

You could do it manually via jQuery like so:

$('button').click(function() {
    $('textarea').val(''); 
});

fiddle