我尝试了什么

Question

我需要一种方法将图像直接输出到实时预览div中用户输入字母。例如，如果用户输入字母'k'，则为显示绑定到'k'字母的图像。但是，目前只有在页面上预先输入的字母加载显示图像，而不是从textarea字段输入的字符，如您在[演示]中所见（http://jsfiddle.net/jLzsrygv/8/）。

我将字符转换为图像的方法如下：

$('#target').each(function() {
var txt = $(this).html();
var img = '<img src="http://i.imgur.com/DWwRx9M.png" alt="' + txt + '" />'
var html = txt.replace(/\*/g, img);
$(this).html(html);
});

我尝试了什么

我尝试更改textarea字段的允许标记以允许img 标签然后用主人控制这个（不可见的）textarea textarea，但没有用，因为k不会将自己转换为img标签在原始的textarea领域。

因为直接插入img标签是唯一对我有用的东西，所以我看到它的唯一方法就是我对语言是为第二个文本区域实时替换字母键入主文本区域（例如'K'替换为）我已经尝试过文本替换，但我觉得我 textContent可能出错，而不是value或innerHTML。 This is as far as I've gotten

感谢任何帮助。

Answer 1

当你有.each()时，你唯一没做的就是调用keyup方法。因此，.each()只被调用一次然后加载JavaScript。将它们放在函数中并在keyup上调用函数。

$(document).ready(function(){
    change1();
    change2();
    $('#someTextBox').keyup(function(){
        $('#target').html($(this).val());
        change1();
        $('#target2').html($(this).val());
        change2();
    });
});

function change1() {
    $('#target').each(function() {
        var txt = $(this).html();
        var img = '<img src="http://i.imgur.com/DWwRx9M.png" alt="' + txt + '" />'
        var html = txt.replace(/\*/g, img);
        $(this).html(html);
    });
}

function change2() {
    $('#target2').each(function() {
        var txt = $(this).html();
        var img = '<img src="http://i.imgur.com/DWwRx9M.png" alt="' + txt + '" />'
        var html = txt.replace(/\*/g, img);
        //console.log(html);
        $(this).html(html);
    });
}

小提琴：http://jsfiddle.net/jLzsrygv/21/

在jQuery实时预览div中将文本转换为图像

我尝试了什么

1 个答案: