如何设置文本修饰：仅针对特定内容加下划线

Question

I have a input tag and where I am getting input value like this.

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

In my css I have text-decoration: underline; but here underline is coming in "space" and ";" both the place. Is there any way I can decorate only text part.

My Code is like :

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) {
    var newinput = input.value.split(';');
    newinput[newinput.length - 1] = "";
    input.value = newinput.join(";");
    input.value += " " + value + ";" + "";    
}

Current it is coming like this.

What exactly I want here

Answer 1

try this concept: https://jsfiddle.net/uza1pbnw/

Example - 1 with 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(' '));

Example - 2 with JQuery

HTML

<p>hello world text done</p>

CSS

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

</style>

JS

<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/

Answer 2

You could write a javascript function that you pass a word to, and it returns that word wrapped in a <span> with text decoration on it.

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


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

Answer 3

As other answers suggest, you would need to wrap specific portions of the text in an element (such as a span) in order to apply styles to those targeted text segments.

Because we can't insert rendered HTML inside an input field, I think the best approach would be to use an additional element to display styled text. Responding to key events, you would then use a regex to search the value for text that should/shouldn't be styled (underlined).

Personally, I am against creating custom fields that try to recreate or supplement browser behavior. With that in mind, I like the idea of using the extra element to simply control the underline appearance and not mess with the actual input's text or value.

Here's an example fiddle.

What's happening in the fiddle:

• The input field is displayed normally. Let's just let it do it's thing.
• The input element ('x-field-input') and the text display element ('x-field-text') have identical font and box model properties so that they align dimensionally.
• The additional element 'x-field-text' has transparent text so that the text within it is not visible. However, instead of 'underline' it uses a bottom border to create the desired appearance. I like the use of border-bottom here because you have control of the color if needed.
• A trivial regex pattern looks for instances of " : " (optional spaces).
• The regex matches are then inserted as innerHTML of the 'x-field-text' element. If the string segment does not match " : ", it is wrapped in a span.

Your formatting is very specific and since I'm not aware of other formats or string conditions that you might want to capture I only included the specific example of " : ". You could adapt this code to accomplish other formats.

Also, I threw this together quickly so only refer to this code as an example. It could most certainly be improved.

 (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> 

Answer 4

After many try i found one way to do this.

Using div contenteditable="true" property you skip underline from specific characters.

Hope this will help for displaying as per requirements.

I create span for set underline from input value and set it to editable 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> 

Answer 5

Many complex and great answers. If you want it done fast and simple:

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

Changes to:

CSS:

.ul {text-decoration: underline;}

JS:

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

And call it a day. Then, once this is working nicely for you, revisit the requirements for the display to determine a better display requirement since underlining is sketchy UX when it's not: a) a hyperlink or b) indicative of something important to the user.

Happy coding.

Answer 6

You could use text-decoration-skip

text-decoration-skip: spaces

It is not being supported by all major browsers though.

Answer 7

just adjust the current strings in input.value on this line :

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

To something like this line :

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

Next you can now add a CSS selector Foo with text-decoration: underline

OR replace class="Foo" with style="text-decoration: underline"

You could use <span> , <p> , <h5> tags or any HTML typography tags.

Answer 8

Try giving span to such items and specify id to it and give following styling to that id

text-decoration :none;

Hope it helps

Answer 9

Okay after having a thorough look at the problem, I have actually realized that there is not any simple solution. As styles can apply to the entirety of an element only, a solution will require at least one element per required style.

Solution

You cannot achieve this with a single input element. Also, JavaScript is required for a solution. So, there are three sections of the input:

• that before the point at which changes are being applied

• that after the point at which changes are being applied

• that at the point the changes are being applied

You should initially include a regular input element and forgo any of the required styling. Use JavaScript to replace the input with a suitable container element. This can be styled to mimic an input element.

As you add values, use JavaScript to identify the above-mentioned three divisions. Wrap them in suitable elements (spans would be ideal) and style as needed.

Consider the following starting point:

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

This will serve as a proper solution to the mentioned problem and also for similar future problems that you encounter.

Answer 10

PURE CSS

For example:

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

Full documentation here: MDN - text-decoration-skip