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

时间：2017-06-27 12:09:42

标签： javascript html css

我有一个输入标签，我得到的输入值就是这样。

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

目前正是这样的。

What I am getting

  

我到底想要什么

What I want

10 个答案:

答案 0 :(得分：10)

尝试这个概念： https://jsfiddle.net/uza1pbnw/

示例 - 使用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(' '));

示例 - 使用JQuery的2

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

答案 1 :(得分：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>"
}

答案 2 :(得分：2)

经过多次尝试，我找到了一种方法来做到这一点。

使用div contenteditable="true"属性，您可以跳过特定字符的下划线。

希望这有助于按要求显示。

  

我从输入值创建设置下划线的范围，并将其设置为可编辑的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>

答案 3 :(得分：1)

正如其他答案所示，您需要将文本的特定部分包含在元素（例如范围）中，以便将样式应用于这些目标文本片段。

因为我们无法在输入字段中插入呈现的HTML，所以我认为最好的方法是使用其他元素来显示样式文本。响应关键事件，您将使用正则表达式搜索应该/不应该设置样式（带下划线）的文本的值。

就个人而言，我反对创建尝试重新创建或补充浏览器行为的自定义字段。考虑到这一点，我喜欢使用额外元素来简单地控制下划线外观而不是弄乱实际输入的文本或值。

Here's an example fiddle.

小提琴里发生了什么：

  • 输入字段正常显示。让我们来做吧 的事情。
  • 输入元素（＆＃39; x-field-input＆＃39;）和文本显示元素（＆＃39; x-field-text＆＃39;）具有相同的字体和框模型属性，以便它们对齐维。
  • 附加元素＆＃39; x-field-text＆＃39;具有透明文本，以便其中的文本不可见。但是，而不是强调＆＃39;它使用底部边框来创建所需的外观。我喜欢在这里使用border-bottom因为你可以根据需要控制颜色。
  • 一个简单的正则表达式模式查找＆＃34; ：＆＃34; （可选空格）。
  • 然后将正则表达式匹配作为＆＃39; x-field-text＆＃39;的内部HTML插入。元件。如果字符串段不匹配＆＃34; ：＆＃34;，它被包裹在一个范围内。

您的格式非常具体，因为我不知道您可能想要捕获的其他格式或字符串条件，所以我只包含了＆＃34;的具体示例。 ：＆＃34;。您可以调整此代码以完成其他格式。

另外，我把它快速地放在一起所以只参考这段代码作为例子。它当然可以得到改善。

＆＃13;
＆＃13; 
(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();
  });
}());
＆＃13; 
.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;
}
＆＃13; 
<div class="x-field">
  <input class="x-field-input" type="text" value="United States : Afghanistan" />
  <div class="x-field-text"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：1)

许多复杂而精彩的答案。如果你想快速简单地完成它：

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

更改为：

CSS：

.ul {text-decoration: underline;}

JS：

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

并称之为一天。然后，一旦这对你很好，重新审视显示的要求，以确定更好的显示要求，因为下划线是粗略的用户体验，当它不是： a）超链接或 b）指示对用户重要的事情。

快乐的编码。

答案 5 :(得分：0)

您可以使用text-decoration-skip 

text-decoration-skip: spaces

但是并没有得到所有主流浏览器的支持。

答案 6 :(得分：0)

只需调整此行<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 full"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 full"> <div class="single-box-flipkart"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> <h1><i class="fa fa-amazon fa-2x"></i></h1> </div> <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12"> <h4>Lorem Ipsum is simply.</h4> </div> </div> </div> </div> </div> </div> 中的当前字符串：

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>标记或任何HTML排版标记。

答案 7 :(得分：0)

尝试为这些项目提供span并为其指定id并为该id提供以下样式

text-decoration :none;

希望有所帮助

答案 8 :(得分：0)

好的，仔细看看问题之后，我实际上已经意识到没有任何简单的解决方案。由于样式只能应用于整个元素，因此解决方案每个所需样式至少需要一个元素。

<强>解决方案

使用单个输入元素无法实现此目的。此外，解决方案还需要JavaScript。因此，输入有三个部分：

  • 在应用更改之前的

  • 在应用更改之后

  • 正在应用更改

您最初应该包含常规输入元素并放弃任何所需的样式。使用JavaScript将输入替换为合适的容器元素。这可以设计为模仿输入元素。

在添加值时，使用JavaScript来识别上述三个部分。根据需要将它们包裹在合适的元素中（跨度是理想的）和样式。

考虑以下起点：

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

这可以作为上述问题的正确解决方案，也可以解决您遇到的类似未来问题。

答案 9 :(得分：0)

PURE CSS

例如：

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

此处提供完整文档： MDN - text-decoration-skip

相关问题
最新问题