Question

我正在使用Angular Material并且这个表单有一个自动填充字段，我正在使用md-autocomplete使用

<input type = "text" />

在内部呈现文本字段。我遇到了这个问题。每当文本长于字段的宽度时，我希望它包装，以便它不被截断，并显示在下一行。

但是使用<input>时无法设置样式，以便在下一行显示溢出文本（我知道textarea符合我的要求，但md-autocomplete使用input）。

所以问题是如何在没有截断的情况下显示文本。任何建议都可以。请帮忙！

Answer 1

来自文档link：

md-search-text-change表达式
md-selected-item-change表达式

我的建议是通过CSS隐藏你的md-autocomplete并挂钩这些表达式来更新用户将看到和交互的textarea。

抱歉暂时没有正常工作的代码。但如果你愿意的话，我可以创造一个plunker。我为ui-autocomplete建了类似的东西。两个输入一个ng-model="data.uiModel和ng-model=data.actualModel"

Answer 2

我不认为输入类型=“文本”是可能的，但作为一种解决方法，您可以在输入中使用title属性并具有与值相同的内容。例如

SQLiteDatabase

这将确保您的内容在悬停时完全可见。

Answer 3

输入元素不能截断文本，但可以做另外一件事来提供textarea元素并将其放在输入字段的顶部。

类似的东西：

<强> HTML： <div class="container-text"> <input type="text" id="myText" /> </div>

<强>的Javascript

(function(){if(document.querySelector('#myText')){
var elm = document.createElement('textarea');
elm.className = 'myTextArea';
document.querySelector('.container-text').appendChild(elm);
document.querySelector('#myText').addEventListener('keyup', textChangeUpdate)}
function textChangeUpdate(){
   document.querySelector('.myTextArea').value = document.querySelector('#myText').value;
   document.querySelector('.myTextArea').focus();
}}());

<强> CSS

.container-text{
    position:relative;
}
.container-text input, .container-text textarea{
    position:absolute;
    top: 0;
    left:0;
    height:40px;
    width:130px;
    z-index:99;
}
.container-text input{
   z-index:100;
    opacity:0;
}

https://jsfiddle.net/5ysfbo3a/

您需要修改CSS以根据您的网站需要带来尺寸和外观。

注意：确保两个元素的尺寸相同，以便您可以看到md-autocomplete元素出现在可见textarea的下方。

希望这会有所帮助。

干杯，阿肖克

Answer 4

您可以通过为文本区域的更改添加事件侦听器来使用textarea和JavaScript来执行此操作。

这是一个有效的JSFiddle。

Answer 5

这是一个简单的指令我掀起了使用textarea技巧。您需要进行一些更改才能将其集成到您的应用中 - 但这并不困难。

http://jsfiddle.net/HB7LU/20128/

这是一个代码笔，显示它与md-autocomplete控件集成在一起。 我没有尝试将数据连接到控制器或其他任何东西。那就是你。

http://codepen.io/anon/pen/pjBKWR

关于我的实施需要注意的重要事项：

单行文本输入仍然是一等公民，是用户与之交互的内容，以及保存用户输入最终值的项目。
textarea仅用于视觉显示，以显示扩展文本字段的外观。
键盘导航仍然有效，您的示波器仍然与原始文本输入绑定。
这不是100％准备就绪 - 你需要确保你的风格与你的风格相匹配。我也保留了这个演示，所以你可以看到textarea只在焦点时出现。在启动之前，您需要将输入的不透明度设置为0;

代码：

myApp.directive('autoExpandInput', function() {
  return {
      restrict: 'E',
      replace: 'true',
      template: '' +
        '<div>' +
            '<textarea rows="1" tabindex="-1"></textarea>' +
            '<input type="text" value="{{inputValue}}" />' +
        '</div>',
      link: function(scope, elem, attrs) {
          elem.find('input').bind('focus', function (ev) {
              ev.target.tabIndex = -1;
              ev.target.previousSibling.focus();
          });
          elem.find('textarea').bind('blur', function (ev) {
              setTimeout(function () {
                  ev.target.nextSibling.tabIndex = 0;
              });
          })[0].oninput = function (ev) {
            var textarea = ev.target;
            scope.$apply(function() {
              scope.inputValue = textarea.value;
            });

            textarea.style.height = "";
            // you may need to play around with the math here a little
            if (textarea.clientHeight < textarea.scrollHeight + 2) {
                textarea.style.height = textarea.scrollHeight + 2 + "px";
                textarea.nextSibling.style.height = textarea.scrollHeight + 2 + "px";
            }
        }
      }
  };
});

Answer 6

最简单的方法是单独保留输入，只显示输入框上方（或下方）的查询。上面更好，因为默认情况下筛选器列表显示在输入下。使用此方法是一种妥协，但有效。您始终可以使输入为零大小或隐藏，并使用控件将输入框聚焦在搜索文本区域上。

    <md-input-container flex>
      <span class="md-longwinded-search">{{ctrl.searchText}}</span>
      <label>Label</label>
      <input type="text"/>
    </md-input-container>

CSS：

    .md-longwinded-search {
        width: 100%;
        height: auto;
        word-wrap: normal;
        overflow: auto;
    }

如何在<input />标记中显示文本而不截断，该标记由框架创建

6 个答案: