Question

我想在运行时将某些单词更改为输入框中的用户类型。反正有没有做到这一点，因为当我使用替换jQuery函数时，它取代了值，但不允许我更改它的CSS。谢谢

这是我迄今取得的成就

这是Javascript：

$("#submit-button").click(function(){
    var oldString = 'john',
    newString = '<span id="newChrome">chrome</span>'
    $("#text-editor").val($("#text-editor").val().replace(RegExp(oldString,"gi"),newString));
});

这是HTML

<input id="text-editor" maxlength="200" width:200px; />
<button id="submit-button">Submit</button>

Answer 1

使用contenteditable div元素，您可以实现在大多数现代浏览器中尝试实现的功能。

＆＃13;

$("#submit-button").click(function() {
  var oldString = 'john',
    newString = '<span class="newChrome">chrome</span>',
    regex = new RegExp(oldString, "gi"),
    value = $("#text-editor").html(),
    str = value.replace(regex, newString);
  $("#text-editor").html(str);
});
$("#text-editor").on('input',function(){
  $a = $(this).find('span')
  $a.filter(function(){
    return $(this).html() != 'john';
  }).removeClass('newChrome');
  $a.filter(function(){
    return $(this).html() == 'chrome';
  }).addClass('newChrome');
});

＆＃13;

.newChrome{
  color: red;
}
#text-editor{
  outline: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div contenteditable="true" id="text-editor" maxlength="200" style="width:200px;"></div>
<button id="submit-button">Submit</button>

＆＃13;

将输入框文本的颜色更改为用户类型

1 个答案: