在输入和文本区域之间切换，但前提是文本很长

Toggle between input and textarea, but only if the text is long

本文关键字：文本 前提 输入 区域 之间      更新时间：2023-09-26

我的目标是每当用户点击输入并且其内容长度大于20时，显示文本区域，否则我将继续显示正常的输出。

我不知道我的逻辑中缺少了什么，但现在我得到了一个不同的行为。

如果用户第一次在带有长文本的输入中单击，则会显示文本区域，当模糊发生时，会再次变为正常的输入

问题是当用户第一次点击短内容，第二次点击长内容入都变成文本区域。只有长内容才应成为文本区域。

我的逻辑中缺少什么

var longContentChecked = null;
scope.isLongContent = function(l){
    return l && longContentChecked
};
scope.adaptLongContent = function(e){
    var textarea = $(e.target).next();
    if (textarea.val().length > 20) {
        longContentChecked = true;
    }else{
        longContentChecked = false;
    }
    textarea.previous().focus();
    textarea.focus();
};

查看

        <td ng-if="gridLoadColumn($index)" ng-repeat="item in items track by $index">
            <input
                type="text"
                ng-model="item.value"
                ng-click="showLongContent = !showLongContent; adaptLongContent($event);"
                ng-show="!isLongContent(showLongContent);"
            />
            <textarea
                class="dgrid-cell-long-content"
                ng-blur="!showLongContent"
                ng-show="isLongContent(showLongContent);"
                ng-model="item.value"
            ></textarea>
        </td>

更新：

我想现在我差不多到了。

var longContentChecked = null;
var longContentIndex = null;
scope.isLongContent = function(l, idx){
    var ret = (l && longContentChecked) && (longContentIndex == idx);
    return ret;
};
scope.adaptLongContent = function(e, idx){
    var textarea = $(e.target).next();
    if (textarea.val().length > 20) {
        longContentChecked = true;
        longContentIndex = idx;
        //textarea.focus();
    }else{
        longContentChecked = false;
        longContentIndex = null;
    }
};

查看

    <tr ng-if="gridLoadRow($index)" ng-repeat="items in dataGrid track by $index">
        <td><strong>{{$index+1}}</strong></td>
        <td ng-if="gridLoadColumn($index)" ng-repeat="item in items track by $index">
            <input
                type="text"
                ng-model="item.value"
                ng-click="showLongContent = !showLongContent; adaptLongContent($event, $index);"
                ng-show="!isLongContent(showLongContent, $index);"
            />
            <textarea
                class="dgrid-cell-long-content"
                ng-blur="!showLongContent; test();"
                ng-show="isLongContent(showLongContent, $index);"
                ng-model="item.value"
            ></textarea>
        </td>
    </tr>

现在，我正在尝试处理美元指数，但它还没有起作用。如果你意识到我包含了一个带有重复的TR。现在显示这条线是有意义的，因为我正在尝试处理索引。

我认为到目前为止，这种方法的问题是，$指数值每次都重复相同的值，例如：TD（0），TD（1），第二行TD（0、1）。我没有唯一的身份。即使我使用$parent$索引我也会遇到同样的问题。

在这种情况下，我如何使该索引成为唯一标识？

试试这样的东西？

<td ng-if="gridLoadColumn($index)" ng-repeat="item in items track by $index">
    <input
        type="text"
        ng-model="item.value"
        ng-click="showLongContent = !showLongContent; adaptLongContent($event);"
        ng-if="item.value.length <= 20"
    />
    <textarea
        class="dgrid-cell-long-content"
        ng-blur="!showLongContent"
        ng-if="item.value.length > 20"
        ng-model="item.value"
    ></textarea>
</td>

遵循最终结果，运行良好。

var longContentChecked = null;
var longContentIndex = null;
scope.isLongContent = function(idx){
    return longContentChecked && (longContentIndex == idx);
};
scope.adaptLongContent = function(e, idx){
    var textarea = $(e.target).next();
    if (textarea.val().length > 20) {
        longContentChecked = true;
        longContentIndex = idx;
    }else{
        longContentChecked = false;
        longContentIndex = null;
    }
};

查看

<tbody>
<tr ng-if="lazyLoadRow($index)" ng-repeat="items in dataGrid track by $index" ng-init="counter = $index">
<td><strong>{{$index+1}}</strong></td>
<td ng-if="lazyLoadColoumn($index)" ng-repeat="item in items track by $index" ng-init="iteration = (counter * items.length + $index)">
    <input
        type="text"
        ng-model="item.value"
        ng-click="adaptLongContent($event, iteration);"
        ng-show="!isLongContent(iteration);"
    />
    <textarea
        class="dgrid-cell-long-content"
        ng-show="isLongContent(iteration);"
        ng-model="item.value"
    ></textarea>
</td>
</tr>
</tbody>
相关文章：