Как отображать текст без усечения в теге <input>, который создается каркасом

Ответ 1

В Doc :

• md-search-text-change выражение запускается, когда пользователь меняет текст
• md-selected-item-change выражение запускается, когда пользователь выбирает элемент

Мое предложение состоит в том, чтобы ваш md-autocomplete скрытый через CSS и связать это выражение, чтобы обновить текстовое поле, которое пользователь увидит и будет взаимодействовать.

Пока нет рабочего кода. Но я мог бы создать плункер, если хочешь. Я построил аналогичный для ui-автозаполнения. Два входа с ng-model="data.uiModel и ng-model=data.actualModel"

Ответ 2

Я не думаю, что это возможно с типом ввода = "текст", но, как работа, вы можете использовать атрибут title во вводе и иметь тот же контент, что и значение. например

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

это позволит убедиться, что ваш контент будет полностью виден на hover.

Ответ 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 появляется под видимым текстовым полем.

Надеюсь, это поможет.

Cheers, Ashok

Ответ 4

Вы можете сделать это, используя textarea и JavaScript, добавив прослушиватель событий для изменения текстовой области.

Здесь работает JSFiddle.

Ответ 5

Вот простая директива, которую я взломал, используя трюк textarea. Вам нужно будет внести некоторые изменения, чтобы интегрировать их в свое приложение, но это не должно быть сложно.

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

И вот код, показывающий его, интегрированный с элементом управления md-autocomplete. Я не пытался подключить данные к контроллеру или что-то еще. Это на вас.

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

Важные замечания по поводу моей реализации:

• Однострочный ввод текста остается гражданином первого класса и является тем, с которым взаимодействует пользователь, и элементом, который содержит окончательное значение ввода пользователя.
• Текстовое поле просто используется для визуального отображения, чтобы создать видимость расширяющегося текстового поля.
• Навигация по клавиатуре по-прежнему работает, и ваша область действия по-прежнему связана с исходным вводом текста.
• Это не 100% -ная готовность к отправке - вам нужно будет убедиться, что ваши стили совпадают, и все, что есть на вас. Я также сохранил демо, чтобы вы могли видеть, что текстовое поле выходит вперед, только когда фокус. Перед запуском вам нужно установить непрозрачность ввода на 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";
            }
        }
      }
  };
});

Ответ 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;
    }