JavaFX - текст подсказки TextField не удаляется после фокуса после изменения цвета - PullRequest
Новая
       27

JavaFX - текст подсказки TextField не удаляется после фокуса после изменения цвета

1 голос
/ 23 апреля 2019

Когда я изменяю цвет prompt-text, либо через setStyle(), либо напрямую через CSS, когда я нажимаю на TextField, во-первых, он не будет автоматически очищаться и из-затак, «полоса», которая обычно появляется, когда вы собираетесь писать в поле, расположена полностью слева - как вы можете видеть на следующих рисунках:

Focused first text field Focused second text field

  • На первом снимке фокусируется Username TextField, цвет которого prompt-text изменен на #000000 (черный).
  • На втором изображении сфокусировано Password TextField с настройками по умолчанию prompt-text.Ничего не изменилось.

Я просмотрел документацию по API JavaFX, многочисленные случаи StackOverflow о TextFields в целом, случаи CSS на других форумах, modena.css (.text-input) искоро.Я нигде не видел никого с такой проблемой, как моя, где предложенное решение сработало бы для меня.

В большинстве случаев люди предлагают использовать -fx-prompt-text-fill: transparent;, но это делает все prompt-texts везде пустыми, независимо отсфокусированы они или нет.

Некоторые из вариантов, которые я также попробовал для text-input Class, таковы: 

.text-input, .text-input:focused {
    -fx-prompt-text-fill: derive(-fx-control-inner-background, 0%);
}

.text-input .text-input:focused {
        -fx-prompt-text-fill: transparent;
}

.text-input, .text-input:focused {
        -fx-prompt-text-fill: transparent;
}

Я потратил 8-10 часов на поиски и попыткинайти решение, но я просто недостаточно разбираюсь в JavaFX / CSS.Некоторая помощь будет очень признательна.

РЕДАКТИРОВАТЬ 1: 

.text-input {
    -fx-prompt-text-fill: <your-color>;
}

.text-input:focused {
    -fx-prompt-text-fill: transparent;
}

Это работает, но применяется ко всем TextFields.Не для конкретного, который я ищу. 

#myId {
    -fx-prompt-text-fill: <your-color>;
}

#myId:focused {
    -fx-prompt-text-fill: transparent;
}

Это также работает, пока я оставляю это как есть.Когда я нажимаю кнопку, которая делает только это: txtUsername.setStyle("-fx-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");, цвет меняется, но затем он игнорирует myId:focused.Как будто его там нет. 

.my-styleclass {
    -fx-prompt-text-fill: <your-color>;
}

.my-styleclass:focused {
    -fx-prompt-text-fill: transparent;
}

Это также работает, но когда я применяю вышеупомянутое setStyle(), происходит то же самое, что и при работе с ID.Он игнорирует часть focused в CSS.

Я нашел этот пример, который работает с привязками. 

txtUsername.styleProperty().bind(Bindings.when(txtUsername.focusedProperty())
                            .then("-fx-prompt-text-fill: transparent;")
                            .otherwise("-fx-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";"));

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

Почему?Я пытаюсь сделать приложение, которое люди могут настроить.Я бы хотел, чтобы они могли изменять цвета определенных частей приложения, и prompt-text из TextField является одним из них.Я использую setStyle(), чтобы применить изменения, чтобы они могли их предварительно просмотреть.Как только они нажмут «Сохранить», все примененные стили будут сохранены в файле .css, а затем программа загрузит этот файл как stylesheet после перезапуска.

РЕДАКТИРОВАТЬ 2: Нашел решение здесь.

CSS: 

.root{
    username-prompt-text-fill: #000000;
}
#txtUsername{
    -fx-prompt-text-fill: username-prompt-text-fill;
}
#txtUsername:focused{
    -fx-prompt-text-fill: transparent;
}

JAVA: 

txtUsername.setStyle("username-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");

Ответы [ 2 ]

2 голосов
/ 23 апреля 2019

Используйте следующий CSS-код для настройки заполнения текста подсказки, но при этом он исчезает при фокусировке: 

.text-input {
    -fx-prompt-text-fill: <your-color>;
}

.text-input:focused {
    -fx-prompt-text-fill: transparent;
}

Если вы хотите настроить таргетинг на конкретный TextField, присвойте ему идентификатор и укажите целевой идентификатор в файле CSS. 

textField.setId("myId");

#myId {
    -fx-prompt-text-fill: <your-color>;
}

#myId:focused {
    -fx-prompt-text-fill: transparent;
}

Если многие TextField должны иметь одинаковый стиль, подумайте над тем, чтобы дать им всем собственный класс стилей. 

textField.getStyleClass().add("my-styleclass");

.my-styleclass {
    -fx-prompt-text-fill: <your-color>;
}

.my-styleclass:focused {
    -fx-prompt-text-fill: transparent;
}

Примечание. Классы id / можно также устанавливать / добавлять через FXML. Если вы используете только fx:id, то id будет таким же значением, в противном случае id используется для CSS, а fx:id используется для вставки поля.

Подробнее см. Справочное руководство по JavaFX CSS .

1 голос
/ 24 апреля 2019

Решение в этом вопросе и Ответ Slaws помогли мне найти решение моей проблемы.

CSS: 

.root{
    username-prompt-text-fill: <color>;
}
#txtUsername{
    -fx-prompt-text-fill: username-prompt-text-fill;
}
#txtUsername:focused{
    -fx-prompt-text-fill: transparent;
}

JAVA: 

txtUsername.setStyle("username-prompt-text-fill: " + returnColorValueInHex(colorPickerValue) + ";");
...