Javascript 如何在<；中显示不截断的文本；输入>；标签，它是由框架创建的

我正在使用这个表单，它有一个自动完成的字段，我正在使用一个

<input type = "text" />

在内部渲染文本字段。我对此有点问题。 每当文本长度超过字段宽度时，我都希望将其换行，这样它就不会被截断，并显示在下一行中

但是使用

无法设置样式以便在下一行显示溢出文本（我知道textarea符合我的要求，但是

md autocomplete

使用

input

）

---

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

我认为输入type=“text”是不可能的，但作为一种解决方法，您可以在输入中使用title属性，并具有与value相同的内容。比如说

<input type="text" title="something that exceeds the width of the box" value="something that exceeds the width of the box">

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

从文档：

• md search text change

  expression在用户更改文本时触发

• md selected item change

  表达式在用户选择项目时被激发

我的建议是通过CSS隐藏您的

md autocomplete

，并钩住这些表达式以更新用户将看到和交互的文本区域

---

对不起，现在没有工作代码。但是如果你想的话，我可以创造一个plunker。我已经为ui自动完成构建了类似的功能。两个输入一个使用

ng model=“data.uiModel

和

ng model=data.actualModel”

输入元素不可能截断文本，但可以通过另一种方式提供textarea元素并将其放置在输入字段的顶部

类似于此：

HTML:

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;
}

您需要修改CSS，以便根据您的网站需要提供维度和外观

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

希望这有帮助

干杯，

---

Ashok

您可以通过使用

textarea

和JavaScript来实现这一点，方法是为文本区域的更改添加事件侦听器

---

这里有一个可行的方法。

最简单的方法是不使用输入，只在输入框上方（或下方）显示查询。以上更好，因为默认情况下，过滤器列表显示在输入下。使用这种方法是一种折衷方法，但效果很好。您可以始终将输入设置为零大小或隐藏，并使用一个控件将输入框集中在搜索文本区域单击上

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

---

这里有一个简单的指令，我使用了textarea技巧。你需要做一些修改才能将其集成到你的应用程序中，但这并不困难

这是一个代码笔，显示它与

md autocomplete

控件集成在一起我没有尝试将数据连接到控制器或任何东西。你请客。

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

• 单行文本输入仍然是一级公民，是用户交互的对象，也是保存用户输入最终值的项目
• 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";
            }
        }
      }
  };
});

myApp.directive（'autoExpandInput'，function（）{
返回{
限制：'E'，
替换为：“true”，
模板：“”+
'' +
'' +
'' +
'',
链接：功能（范围、要素、属性）{
元素查找（'input'）。绑定（'focus'，函数（ev）{
ev.target.tabIndex=-1；
ev.target.previousSibling.focus（）；
});
元素查找（'textarea'）。绑定（'blur'，函数（ev）{
setTimeout（函数（）{
ev.target.nextSibling.tabIndex=0；
});
})[0]。oninput=函数（ev）{
var textarea=ev.target；
作用域$apply（函数（）{
scope.inputValue=textarea.value；
});
textarea.style.height=“”；
//你可能需要在这里玩一下数学
if（textarea.clientHeight

我想到了这一方法，但它的开销太大，但是文本区域的外观和感觉必须与本机Angle material元素的外观和感觉保持一致，这只会使Angle material更新变得更加困难。我同意。但是对于这个特定的需求，我找不到更好的解决方案。特别是因为我们无法在输入中添加换行符。您可以要求更多的时间来实现您自己的指令，该指令包装了

md autocomplete

指令，以实现更干净的可管理代码。祝你好运，玩得开心；）相关的赏金让我想尝试为你创建自定义指令，但是。。我不知道。你想让我这么做吗？老兄，我们正在讨论角度指令。在你发布这样的答案之前，去阅读并理解Angular是如何工作的，以及指令是如何工作的。我不会投反对票，但我也不会投赞成票！哥们，我们正在讨论角度指令。在进行p之前，阅读并理解Angular如何工作以及指令如何工作

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";
            }
        }
      }
  };
});