Question

我在页面左侧有一个表单，右边是一些纯文本。在表单中，有一个输入。当用户键入输入时，部分纯文本需要用输入值替换。所以，对于我的HTML，我有 -

<form>
<label>Add your custom text</label>
<input type="text">
</form>
I go to libraries. <!-- "libraries" is to be replaced with the input value automatically without page refresh -->

我不知道从哪里开始使用JavaScript。欢迎使用JQuery和纯JavaScript答案。我可能更喜欢JavaScript，因为我想了解更多信息。基本上我是在尝试构建一个html生成器。

编辑 - 所以要点是，当用户在输入中键入文本时，如何使用该值替换页面上已有的字符串部分？理想情况下，更新是自动的，不需要提交表单。

我在这里找到了一个接近我想做的答案 - How do I get a dynamic form to update Text in HTML?

不同之处在于我试图在页面上找到一个字符串并更改它而不是找到一个元素并添加一个内部字符串。

Answer 1

我不是100％确定我理解你的问题，但听起来你希望能够从用户输入字段动态添加和删除CSS类。如果这是正确的那么你可以用这样的jQuery做到这一点：

// add class
$('.popup').addClass($('input[type=text]').val());

// remove class
$('.popup').removeClass('subscriptions');

那说你需要用一个事件来驱动那个代码，你可以通过在页面上添加一个按钮并在点击该按钮时调用上面的代码来实现。

修改

试试这个：

var tag = $($('code').html()).addClass('subscriptions')[0]; $('code').html(tag);

Answer 2

以下代码将执行以下操作：

检查您是否填写了输入框
如果有，请使用输入框的值并更新弹出类

对于有限且不明确的问题，我能提供最大的帮助。

＆＃13;

$('input#thebox').keypress(function(e) {
    console.log($(this).val());
    if(e.which == 13 && $(this).val().length > 0) {
        var c = 'popup '+$(this).val();
        $('div.popup').removeClass().addClass(c).text(c);
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id='thebox'>
<div class="popup">popup div</div>

＆＃13;

如何使用输入值动态替换部分字符串？

2 个答案: