Проблема с заглавными буквами в текстовом поле

Допустим, у меня есть <input> и <textarea> и какой-то javascript, где я отправляю значение <input> в <textarea> с дополнительным текстом, как мой фрагмент ниже.

У меня есть свойство text-transform: capitalize в моем стиле <input>, и я не могу отправить текст из input> в <textarea> со словами, написанными с заглавной буквы, как есть.

Если я передам text-transform: capitalize<textarea>, каждое слово будет писаться с заглавной буквы, что нежелательно.

Как мне обойти это?

function sendText(){
  var input =document.getElementById("input");
  var textarea =document.getElementById("textarea");
  
  textarea.value  = "My name is " + input.value;
  
  
}

input{
  margin-right:10px;
 float:left;
  text-transform: capitalize;
}
textarea{
  height:30px;
  width:140px;
  float:left;
  
}

<html>
<body>
  <input id = "input" onkeyup = "sendText()" placeholder = "Your Name Here"><textarea id = "textarea"></textarea>
</body>
</html>

text-transform не применяется к значению, вместо этого сделайте первый символ ввода прописным, stackoverflow.com/questions/1026069/…

— 14.12.2020 00:57

Однако text-transform: capitalize влияет на результаты вызова element.innerText. Однако я не подтвердил, что .innerText работает с вводом.

— 14.12.2020 01:21

javascript html css

14.12.2020 00:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

131

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

CSS - это просто CSS, он не изменит значение поля. Вам нужно капитализировать стоимость самостоятельно:

function sendText(){
  var input = document.getElementById("input");
  var textarea = document.getElementById("textarea");
  
  textarea.value = "My name is " + capitalize(input.value);
}

function capitalize(str) {
  return str.replace(/\b\w/g, function(char) { return char.toUpperCase(); });
}

input{margin-right:10px;float:left;text-transform:capitalize}textarea{height:30px;width:140px;float:left}

<input id = "input" onkeyup = "sendText()" placeholder = "Your Name Here"><textarea id = "textarea"></textarea>

14.12.2020 01:00

Может быть, вы могли бы попробовать это? В этом коде я просто заменил textarea на contenteditable для стилизации. Затем я сделал так, чтобы он создавал новый элемент.

function sendText(){
  var input =document.getElementById("input");
  var textarea =document.getElementById("textarea");
    
  
  textarea.innerHTML  = "My name is <b id='name'>" + input.value + "</b>";
}

input{
  margin-right:10px;
  float:left;
}
#textarea{
  height:30px;
  width:140px;
  float:left;
  border: 1px solid;
  font-family: Arial;
}
#name{
  text-transform: capitalize;
}

<html>
<body>
  <input id = "input" onkeyup = "sendText()" placeholder = "Your Name Here">
  <div contenteditable = "true" id = "textarea"></div>
</body>
<html>

14.12.2020 03:49

Другие вопросы по теме

Display: flex & justify-content: space-evenly

Как потоковые сайты отображают информацию о видео в браузере

Фильтр данных без отображения всех элементов по умолчанию

Переопределить стиль текста в SVG

Невозможно получить доступ к библиотеке p5.js из родительского каталога в атоме, используя синтаксис пути ..\

Как изменить `href` в `link` с помощью javascript

Невозможно записать в созданный файл HTML в Java

Проблема с загрузкой данных из файла JSON в таблицу HTML с помощью функции js

Не удается разобрать «href» из строки в BeautifulSoup4

Как разместить фоновое изображение под другим, используя разделы?

Проблема с заглавными буквами в текстовом поле

Ответы 2

Другие вопросы по теме

Похожие вопросы