如何在Angular中使用省略号和标签实现(动态宽度)文本输入?

jakub.g

<input type="text">如果用户提供的值太长而无法在UI中显示,我想在in Angular应用程序中显示省略号(如果不在编辑中)。

文本输入将具有动态宽度,在其旁边有一个文本标签,并且输入应占用标签后的所有可用空间。

无论长度如何,标签都应为单行。

但是,我知道HTML文本输入(<input>)不能带有省略号,只有常规HTML元素<div>可以带有省略号可以通过某种方式实现吗?

jakub.g

看看这个pl

带省略号的角文本输入

有很多事情在起作用:

  • 该值将显示为常规值<span>(以便显示省略号),并且在单击时将<input>显示值(由editing变量控制
  • focusMe指令用于将焦点放在<input>创建时以替换<span>
  • nonBreaking 过滤以使文本标签显示在一行中
  • 基于flexbox的各种CSS规则控制显示
  • overflowtext-overflow注意省略号
  • white-space: nowrapflex-shrink: 0确保文本标签没有分成多行
  • flex-grow: 1确保<input>占用所有可用空间

缺点:

  • 当用户<span>首次点击静态广告时,光标会放在的开头,而<input>不是用户点击的位置(如果他点击了中间位置)
  • 当标签长于视口宽度时,将不会显示textinput(假设视口宽度始终比标签长得多)

附加信息:

添加验证时,<input>如果模型处于无效状态,则可能希望保持显示状态,否则绑定值将为空,跨度将为空。

去做吧:

  • 将“名称”传递给指令并在内部执行 <input name="{{name}}">
  • 改成 <span ng-show="!editing && form.{{name}}.$valid">
  • 改成 <input ng-show="editing || !form.{{name}}.$valid">

完整代码:

HTML:

<!doctype html>
<html ng-app="plunker">
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
  <script type="text/ng-template" id="InputTextWithEllipsis.html">
    <div class="input-text-with-ellipsis-wrapper">
      <label class="mylabel" ng-bind-html="mylabel | nonBreaking"></label>
      <span class="dual-input-wrapper">
        <span
          ng-show="!editing"
          ng-click="editing = true"
          class="static-text-with-ellipsis">{{mymodel}}</span>
        <input
          ng-show="editing"
          ng-focus="editing = true"
          ng-blur="editing = false"
          focus-me="editing"
          ng-model="mymodel"
          class="editable-textinput" />
      </span>
    </div>
  </script>
</head>
<body ng-controller="MainCtrl">
  <form name="profile">
    <input-text-with-ellipsis
      mylabel="'Name'"
      mymodel="dataModel.name"
    ></input-text-with-ellipsis>

    <input-text-with-ellipsis
      mylabel="'Last Name'"
      mymodel="dataModel.lastName"
    ></input-text-with-ellipsis>

    <input-text-with-ellipsis
      mylabel="'A very long label here'"
      mymodel="dataModel.lastName"
    ></input-text-with-ellipsis>
  </form>
</body>
</html>

JS:

var myModule = angular.module('plunker', []);

myModule.filter('nonBreaking', function($sce) {
  return function(inputStr) {
    var outputStr = inputStr.replace(/\s/g, '&nbsp;');
    return $sce.trustAsHtml(outputStr);
  };
});

/*
 * http://stackoverflow.com/a/14837021/245966
 */
myModule.directive('focusMe', function($timeout, $parse) {
  return {
    link: function(scope, element, attrs) {
      var model = $parse(attrs.focusMe);
      scope.$watch(model, function(value) {
        if (value === true) {
          $timeout(function() {
            element[0].focus();
          });
        }
      });
    }
  };
});

myModule.controller('MainCtrl', function($scope) {
  $scope.dataModel = {
    name: "Fernando",
    lastName: "Fernandez Sanchez de la Frontera"
  }
});

myModule.directive('inputTextWithEllipsis', function(){
  return {
    restrict: 'E',
    templateUrl: 'InputTextWithEllipsis.html',
    require: ['^form'],
    scope: {
      mylabel: '=',
      mymodel: '='
    },
    link: function(scope, element, attrs, ctrls) {
      scope.editing = false;
    }
  };
});

CSS:

* {
  font: 16pt sans-serif;
  border: 0;
  padding: 0;
  margin: 0;
  outline: 0;
}

.input-text-with-ellipsis-wrapper {
  background-color: linen;
  padding: 10px;

  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.mylabel {
  background-color: #ffddcc;
  margin-right: 10px;

  flex-basis: auto;
  flex-shrink: 0;
  min-width: 50px;
}

.dual-input-wrapper {
  flex-basis: auto;
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
}

.editable-textinput {
  background-color: #ddf;

  width: 100%;
  text-align: right;
}

.static-text-with-ellipsis {
  background-color: #eeccbb;

  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Android TextView中使用自定义省略号

来自分类Dev

如何在嵌套函数中正确使用省略号

来自分类Dev

R:如何在省略号中使用列表元素(如参数)?

来自分类Dev

当我在Google Chrome中使用省略号inContent可编辑Div时缺少文本

来自分类Dev

CSS文字省略号和100%宽度

来自分类Dev

带有省略号的动态文本旁边的滑动图标

来自分类Dev

R在call()中使用省略号...

来自分类Dev

在定义中使用省略号时,如何在R函数调用中捕获错误或未定义的参数

来自分类Dev

如何使用CSS实现单行省略号

来自分类Dev

如何使省略号在具有动态宽度(flex:1)的flex项目上工作?

来自分类Dev

如何将省略号应用于CheckBoxList控件标签文本

来自分类Dev

如何在Bootstrap响应表中使用省略号

来自分类Dev

如何用省略号截断长文本,但总是在省略号后显示图标

来自分类Dev

React Native在React Native iOS Android中创建省略号剪切的文本或如何在React native中使多余的文本用点隐藏

来自分类Dev

CSS文本溢出:在Angular 8中使用CSS网格时省略号不起作用

来自分类Dev

CSS div自动调整大小到内容,带有最大宽度和省略号文本

来自分类Dev

具有第二列动态宽度和省略号的固定宽度表

来自分类Dev

宽度100%元素中的文本溢出省略号实现

来自分类Dev

用括号和省略号在流中输入别名

来自分类Dev

Angular Material如何获取复选框文本溢出省略号

来自分类Dev

如何在文本区域的文本末尾显示省略号(...)?

来自分类Dev

如何在CSS中的省略号文本溢出旁边(右侧)添加文本?

来自分类Dev

如何使用文字溢出:省略号?

来自分类Dev

如何在标签或textbloxk的内容的中心放置省略号

来自分类Dev

省略号以限制离子的文本高度和宽度

来自分类Dev

在表格中使用省略号

来自分类Dev

使用文本溢出获取跨度中文本的宽度:省略号;在 IE11

来自分类Dev

在 Chrome 和 Safari 下一行的列表项中使用文本溢出省略号链接

来自分类Dev

在 Java 中使用省略号时如何传递数组?

Related 相关文章

  1. 1

    如何在Android TextView中使用自定义省略号

  2. 2

    如何在嵌套函数中正确使用省略号

  3. 3

    R:如何在省略号中使用列表元素(如参数)?

  4. 4

    当我在Google Chrome中使用省略号inContent可编辑Div时缺少文本

  5. 5

    CSS文字省略号和100%宽度

  6. 6

    带有省略号的动态文本旁边的滑动图标

  7. 7

    R在call()中使用省略号...

  8. 8

    在定义中使用省略号时,如何在R函数调用中捕获错误或未定义的参数

  9. 9

    如何使用CSS实现单行省略号

  10. 10

    如何使省略号在具有动态宽度(flex:1)的flex项目上工作?

  11. 11

    如何将省略号应用于CheckBoxList控件标签文本

  12. 12

    如何在Bootstrap响应表中使用省略号

  13. 13

    如何用省略号截断长文本,但总是在省略号后显示图标

  14. 14

    React Native在React Native iOS Android中创建省略号剪切的文本或如何在React native中使多余的文本用点隐藏

  15. 15

    CSS文本溢出:在Angular 8中使用CSS网格时省略号不起作用

  16. 16

    CSS div自动调整大小到内容,带有最大宽度和省略号文本

  17. 17

    具有第二列动态宽度和省略号的固定宽度表

  18. 18

    宽度100%元素中的文本溢出省略号实现

  19. 19

    用括号和省略号在流中输入别名

  20. 20

    Angular Material如何获取复选框文本溢出省略号

  21. 21

    如何在文本区域的文本末尾显示省略号(...)?

  22. 22

    如何在CSS中的省略号文本溢出旁边(右侧)添加文本?

  23. 23

    如何使用文字溢出:省略号?

  24. 24

    如何在标签或textbloxk的内容的中心放置省略号

  25. 25

    省略号以限制离子的文本高度和宽度

  26. 26

    在表格中使用省略号

  27. 27

    使用文本溢出获取跨度中文本的宽度:省略号;在 IE11

  28. 28

    在 Chrome 和 Safari 下一行的列表项中使用文本溢出省略号链接

  29. 29

    在 Java 中使用省略号时如何传递数组?

热门标签

归档