Изменение в тексте

[vladimircape]

Добрый день.

Кто может поможет статьями или советом, как лучше сделать такую вещь.

Есть текст письма.

к примеру

"Добрый день, у нас есть 1020 долларов и мы хотим участников ближе к Москве"

при нажатии по тексту ,его можно редактировать.

но также вверху есть галочки checkbox и с формами ввода для цены и адресса.

К примеру нажав на галочку цены и введя 500 ,в тексте меняется 1020 на 500

или нажав на галочку в Москве и меняя текст на Питер, в тексте меняется Москве на Питер

Все бы можно сделать при помощи меток, типа класса,но

1)При редактировании текста будут видны эти метки типа <p class="price">1020</p> и если при редактировании пользователь их неправильно изменит, то выведется html как текст

Как эту проблему решить?

2)Если пользователь стерёт и изменить полностью текст, то потом куда ставить цену и адресс, если он нажмет на checkbox?

[SilentImp]

Почитайте по contenteditable.

Если пользователь сотрет таки нужный блок — просто добавьте его снова.

[WolF™]

HTML:

<form>
    <label>Ввести свою цену <input type='checkbox' id = 'setprice'></label>
    <input id = 'price' style = 'display: none'><br>
    <hr>
    <input id = 'print' style = 'width: 100%' value = 'Добрый день, у нас есть 1020 долларов и мы хотим участников ближе к Москве'>
</form>

JS:

var defVal = $('#print').val();

$('#setprice').change(function() {
    if ($(this).attr('checked')) {
        $('#price').css('display', 'block');
    } else {
        $('#price').css('display', 'none');
        $('#print').val(defVal);
    }
});

$('#price').keypress(function() {
    setTimeout(function() {
        if ($('#price').val()) {
            $('#print').val($('#print').val().replace(/\d+/, $('#price').val()));
        } else {
            $('#print').val(defVal)
        }
    }, 100)
});

JSFiddle

Поймешь задумку - сделаешь сам)