用于 textarea 的 Bootstrap X 可编辑的清除按钮答案

【问题标题】：Bootstrap X-editable, clear button for textarea用于 textarea 的 Bootstrap X 可编辑的清除按钮
【发布时间】：2014-02-06 21:00:24
【问题描述】：

我想知道是否有可能在 bootstrap-editable 中使用输入类型 textarea 的清除按钮，因为它在 input type="text" 中通过一组属性 clear: true

或者我必须使用一些解决方法吗？

【问题讨论】：

你用的是什么插件？这个vitalets.github.io/x-editable/docs.html ?
嗨 Irvin，是的，X-editable - v1.5.1

标签： jquery twitter-bootstrap x-editable

【解决方案1】：

我找不到任何方法，我认为这是因为 textarea 更难设置样式，因为它可以调整大小并且有更多行。

在不修改原始代码的情况下，我做了一个小技巧。

如果clear 选项为真，我使用shown 事件将自定义按钮添加到插件并附加自定义事件以清除文本区域内容。

代码：

$('#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
});

演示：http://jsfiddle.net/IrvinDominin/8akfp/

【讨论】：

你是对的，没有办法在引导库中做得更好。无论如何，在我看来，您的解决方案对我来说非常沉重:) 我的意思是 Dpeif 的解决方案也是如此。但我喜欢右边的清除按钮，看起来不错！谢谢
@stenly 你可以询问开发人员或分叉一个实现，但我认为这是唯一的解决方案

【解决方案2】：

您可以像这样通过 jQuery 手动完成：

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

fiddle

【讨论】：

确实如此，但对于示例文本类型的输入，允许设置 clear 属性以自动生成清除按钮。我找不到 textarea 类型的输入