Пользовательский интерфейс Onsen, добавьте четкую кнопку ввода

Я не могу найти простой способ добавить кнопку очистки (x) в поле ввода в пользовательском интерфейсе Onsen. Любая помощь будет оценена специально для поиска типа ввода.


monaca onsen-ui
person MoreScratch    schedule 01.02.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Предполагая, что вы используете прямой JS с DOM, используйте это:

<input id="txtSearch" value="Clear Me">
<ons-button onclick="document.getElementById('txtSearch').value='';">Clear</ons-button>

Изменить: добавление еще одного грязного решения, используя для этого простой CSS:

<input id="txtSearch" value="Clear Me">
<ons-icon icon="ion-close" size="20px" fixed-width="true" style="margin-left:-25px" onclick="document.getElementById('txtSearch').value='';"></ons-icon>
person Munsterlander    schedule 01.02.2016
comment
Я надеялся на решение, которое поместит кнопку внутрь ввода, а не рядом с ним/под ним... - person MoreScratch; 01.02.2016
comment
Отредактировано, чтобы добавить то, что вы ищете. Возможно, вам придется немного поиграть с вашим css, но это самый быстрый и простой способ сделать это, не залезая для этого в кучу бутстрапа. - person Munsterlander; 01.02.2016

arrow_upward
0
arrow_downward

Я обнаружил, что для ввода типа поиска вам нужно включить кнопку очистки x с помощью CSS, потому что она отключена в стиле onsen-ui. Чтобы включить его, добавьте эту строку в свой css

.search-input::-webkit-search-cancel-button { display: inline-block; }
person mkspeter3    schedule 02.07.2021