Как установить текстовое оформление: подчеркнуть только конкретный контент

У меня есть тег ввода и где я получаю входное значение, подобное этому.

input.value += " " + value + ";" ;

В моем css у меня есть text-decoration: underline;, но здесь подчеркивается "космос" и ";" оба места. Есть ли способ украсить только текстовую часть.

Мой код похож:

var div = document.getElementById(divID);


    var myTable = '<input type="text" id="myInput"  list="myUL" onclick = "openingList()" onkeyup="openingList()" style="width:30%;" >' +
        '<div id="triggers">' + '<img class="trigger" onclick ="deleteValue()" src="css/clearT.png" id="cross" />' + '<img class="trigger" src="css/combo_arrow.png" onclick = "openingList()" id="arrow" />' + '</div>' +
        '<ul id="myUL" hidden=true>' + '<li>' + '<a href="#" ></a>' + '</li>' + '</ul>';

    div.innerHTML = myTable;

function selectItem(input, value) {
        debugger;
        var newinput = input.value.split(';');
            newinput[newinput.length-1] = "";
            input.value = newinput.join(";");
            input.value += " " + value + ";" + "";

    }

В настоящий момент это происходит следующим образом.

Что именно я хочу здесь

Ответ 1

попробуйте эту концепцию: https://jsfiddle.net/uza1pbnw/

Пример - 1 с Pure JS

var text = "How are you doing today?";
text = text.split(" ");
    len = text.length,
    result = []; 

for( var i = 0; i < len; i++ ) {
    result[i] = '<span>' + text[i] + '</span>';     
}   

console.log(result.join(' '));

Пример - 2 с помощью JQuery

HTML

<p>hello world text done</p>

CSS

<style>
    p span {
        text-decoration: underline;
    }

</style>

<script>
    $('p').each(function() {
        var text = $(this).html().split(' '),
            len = text.length,
            result = [];

        for (var i = 0; i < len; i++) {
            result[i] = '<span>' + text[i] + '</span>';
        }
        $(this).html(result.join(' '));
    });

</script>

https://jsfiddle.net/princesodhi/0h8oqknz/4/

Ответ 2

Вы можете написать функцию javascript, через которую вы передадите слово, и оно вернет это слово, заключенное в <span> с украшением текста на нем.

var myFullString = tdu(input.value) += " " + tdu(value + ";") ;


function tdu(str) { //Text decoration underline function
    return "<span style='text-decoration: underline'>" + str + "<span>"
}

Ответ 3

После многих попыток я нашел один способ сделать это.

Используя свойство div contenteditable="true", вы пропускаете подчеркивание от определенных символов.

Надеемся, что это поможет отобразить в соответствии с требованиями.

Я создаю span для set underline из входного значения и устанавливаю его в редактируемый div.

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);
};
function funUnderLine(){
    // DIV value.
    var underLine = document.getElementById('likeInput');
    // Get hidden input for post.             
    var actualValue = document.getElementById('actualValue');
    // Create newStr variable for set temporary value.
    var newStr = "";
    // Split space and UD variables.
    var splitVal = actualValue.value.split("");
    var tempArray = ['_words_'];
    var word = [];
    var str = "";
    // Set spllited value to an array. 
    for(val in splitVal){
        if(splitVal[val]==' '){
            var temp = [];
            temp['_space_'] = splitVal[val];
            tempArray.push(temp);
        }
        else if(splitVal[val]==';'){
            var temp = [];
            temp['_semicolon_'] = splitVal[val];
            tempArray.push(temp);
        }
        else{
            tempArray.push(splitVal[val]);
        }
    }
    // Generate underlined strings except [space] and [semicolon].
    for(val in tempArray){
        if( Object.prototype.toString.call(tempArray[val]) === '[object Array]' ) {
            if( Object.prototype.toString.call(word) === '[object Array]' ) {
                str += '<span style="text-decoration: underline;">';
                for(v1 in word){
                    str += word[v1];
                }
                str += '</span>';
            }
            for(v in tempArray[val]){
                str += tempArray[val][v];
            }
            var word = [];
        }
        else{
            if(tempArray[val] != '_words_'){
                word.push(tempArray[val]);
            }
        }
    }

    // Check only words.
    if(word.length>0){
        str += '<span style="text-decoration: underline;">';
        for(val in word){
            str += word[val];
        }
        str += '</span>';
    }

    // Append new html.
    underLine.innerHTML = ""; // First blank old html.
    underLine.innerHTML = str; // Than append new html.
}
funUnderLine(); // Load first time.

#likeInput {
    -webkit-appearance: textfield;
    background-color: white;
    -webkit-rtl-ordering: logical;
    user-select: text;
    cursor: auto;
    padding: 1px;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 13.3333px Arial;
    border: 1px solid #a9a9a9;
    -webkit-writing-mode: horizontal-tb;
}

<input type="text" id="actualValue" value="United State ; India;" onkeyup="funUnderLine();"/> <label>Text Box</label>
<br /><br />
<div contenteditable="true" id="likeInput"></div> <label>Editable Div</label>

Ответ 4

Как следует из других ответов, вам нужно будет обернуть определенные части текста в элементе (например, span), чтобы применить стили к целевым текстовым сегментам.

Поскольку мы не можем вставлять визуализированный HTML внутри поля ввода, я думаю, что лучшим подходом было бы использование дополнительного элемента для отображения стилизованного текста. Отвечая на ключевые события, вы затем будете использовать регулярное выражение для поиска значения для текста, который должен/не должен быть стилизован (подчеркнуто).

Лично я против создания настраиваемых полей, которые пытаются воссоздать или дополнять поведение браузера. Имея это в виду, мне нравится идея использования дополнительного элемента, чтобы просто контролировать внешний вид подчеркивания и не вмешиваться в фактический текст ввода или значение.

Вот пример скрипта.

Что происходит в скрипке:

Поле ввода отображается нормально. Позвольте просто позволить этому сделать это вещь.
Элемент ввода ( "x-field-input" ) и текстовый элемент отображения ( "x-field-text" ) имеют одинаковые свойства модели шрифта и окна, чтобы они выравнивались по размеру.
Дополнительный элемент "x-field-text" имеет прозрачный текст, поэтому текст внутри него не отображается. Однако вместо "подчеркивания" он использует нижнюю границу для создания желаемого внешнего вида. Мне нравится использование border-bottom здесь, потому что при необходимости вы можете управлять цветом.
Тривиальный шаблон регулярного выражения ищет экземпляры ":" (необязательные пробелы).
Соответствие регулярных выражений затем вставляется как innerHTML элемента "x-field-text" . Если сегмент строки не соответствует ":" , он завернут в диапазон.

Ваше форматирование очень специфично, и поскольку я не знаю других форматов или строковых условий, которые вы захотите захватить, я включил только конкретный пример ":" . Вы можете адаптировать этот код для выполнения других форматов.

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

(function() {
    let CustomField = function(el) {
      this.init = () => {
      this.el = el;
      this.inputEl = this.el.querySelector('.x-field-input');
      this.textEl = this.el.querySelector('.x-field-text');
      this.renderText();
      this.bindUserEvents();
    };
    
    this.bindUserEvents = () => {
        this.inputEl.addEventListener('keyup', this.inputKeyUp.bind(this));
    };
    
    this.inputKeyUp = () => {
    	this.renderText();
    }
    
    this.renderText = function() {
      let regex = new RegExp(/(.*)((?:\W)?\:(?:\W)?)(.*)/, 'g');
      let value = this.inputEl.value;
	  let groups = regex.exec(value);
	  let html = '';
      
      if (groups && groups.length) {
        for(var i = 1; i < groups.length; i++) {
          if (/((?:\W)?\:(?:\W)?)/.test(groups[i])) {
            html += groups[i];
          } else {
            html += '<span>' + groups[i] + '</span>';
          }
        }
      }
      
      this.textEl.innerHTML = html;
    }
  
	return this;
  };
  
  let customFieldEls = document.querySelectorAll('.x-field');
  
  customFieldEls.forEach((n) => {
  	let customField = new CustomField(n);
    customField.init();
  });
}());

.x-field {
  position: relative;
  display: block;
  width: 100%;
}

.x-field .x-field-input,
.x-field .x-field-text {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 50px;
  padding: 10px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 30px;
  vertical-align: middle;
}

.x-field .x-field-text {
  pointer-events: none;
  color: transparent;
  background: transparent;
  border: 1px solid gray;
}

.x-field .x-field-text span {
  border-bottom: 1px solid gray;
}

<div class="x-field">
  <input class="x-field-input" type="text" value="United States : Afghanistan" />
  <div class="x-field-text"></div>
</div>

Ответ 5

Много сложных и замечательных ответов. Если вы хотите сделать это быстро и просто:

input.value += " " + value + ";" ;

Изменения:

CSS

.ul {text-decoration: underline;}

JS:

startUL = "<span class='ul'>";
endUL = "</span>";
startUL + input.value + endUL += " " + startUL + value + endUL + ";" ;

И назовите это днем. Затем, как только это будет хорошо работать для вас, пересмотрите требования к дисплею, чтобы определить лучшее требование отображения, поскольку подчеркивание является отрывочным UX, когда это не так: a) гиперссылка или b) указывает на что-то важное для пользователя.

Счастливое кодирование.

Ответ 6

Вы можете использовать text-decoration-skip

text-decoration-skip: spaces

Однако он не поддерживается всеми основными браузерами.

Ответ 7

просто отрегулируйте текущие строки в input.value в этой строке:

input.value += " " + value + ";" ;

Что-то вроде этой строки:

input.value += ' ' + '<p class="Foo">'  + value + ';</p>' ;

Затем вы можете добавить селектор CSS Foo с помощью text-decoration: underline

ИЛИ замените class="Foo" на style="text-decoration: underline"

Вы можете использовать теги <span>, <p>, <h5> или любые теги типографии HTML.

Ответ 8

Попробуйте указать диапазон для таких элементов и указать id для него и дать следующий стиль этому id

text-decoration :none;

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

Ответ 9

Хорошо, после тщательного изучения проблемы, я действительно понял, что нет простого решения. Поскольку стили могут применяться ко всему элементу только, для решения потребуется по крайней мере один элемент для каждого требуемого стиля.

Решение

Вы не можете добиться этого с помощью одного элемента ввода. Кроме того, для решения требуется JavaScript. Итак, есть три раздела ввода:

что до того момента, когда применяются изменения,
что после того, как применяются изменения,
что в момент внесения изменений

Сначала вы должны включить обычный элемент ввода и отказаться от любого требуемого стиля. Используйте JavaScript для замены ввода подходящим элементом контейнера. Это можно стилизовать, чтобы имитировать входной элемент.

По мере добавления значений используйте JavaScript для идентификации вышеупомянутых трех разделов. Оберните их в подходящие элементы (пролеты были бы идеальными) и стиль по мере необходимости.

Рассмотрим следующую отправную точку:

<div class="input">
  <span class="before"> </span>
  <span class="edited">value</span>
  <span class="after">;</span>
</div>

Это будет служить правильным решением указанной проблемы, а также для похожих будущих проблем, с которыми вы сталкиваетесь.

Ответ 10

PURE CSS

Например:

text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
// etc ...

Полная документация здесь: MDN - текст-украшение-пропустить