JQuery - Измените текстовое поле на текст при нажатии

Я работаю над системой онлайн-бронирования, в основном я хочу, чтобы текстовое поле менялось в текст абзаца, когда пользователь нажимает кнопку. Как правило, удаляется текстовое поле и отображается только что введенное значение.JQuery - Измените текстовое поле на текст при нажатии

Это HTML в текстовом поле, что я хочу изменение:

<input type="text" class="input-txt-xxxsml left" id="txt-pickup-hn" name="txt-pickup-hn" tabindex="1" value="" />

И это HTML для кнопки, что я хочу, так что, когда пользователь нажимает на нее, она изменяет текстовое поле для всего текста:

<button class="btn-med ui-button ui-state-default ui-button-text-only ui-corner-all btn-hover-anim btn-row-wrapper left" name="btn-row-wrapper" >Search</button>

Любая помощь с этим будет очень признательна!

источник

2012-04-03 nsilva

Что вы имеете в виду только текст? ваш исходный тип ввода уже равен тексту –

Вы хотите изменить текст текстового поля или добавить другой контент .. уточните вопрос –

В принципе, когда пользователь нажимает кнопку, он удаляет текстовое поле и отображает только

значение

если это имеет смысл – nsilva

http://jsfiddle.net/muSYu/1/

$('#textify').click(function() { 
    $('input').replaceWith(function() { 
     return '<div>' + $(this).val() + '</div>'; 
    }); 
})

Для примера:

$('.btn-med').click(function() { 
    $('#txt-pickup-hn').replaceWith(function() { 
     return '<div>' + $(this).val() + '</div>'; 
    }); 
});

Вы должны действительно дать ваш идентификатор кнопки, кстати :)

источник

2012-04-03 09:48:11

Пятно на, спасибо большое! – nsilva

С помощью кнопки добавьте OnClick, который вызывает Javascript функция:

<button onclick='javascript:changeText()' />

Тогда в функции сделать:

$('#txt-pickup-hn').text('new text');

источник

2012-04-03 09:47:52 Agilix

пытаются добиться такого эффекта? http://jsfiddle.net/fcalderan/L7dWc/

HTML

<input type="text" value="lorem ipsum"> 
<button type="button">search</button>

Javascript

$('button').on('click', function() { 
var i = $('input'), 
    v = i.val(); 

    if ($(this).hasClass('search')) { 
     $('p').remove();  
    } 
    else { 
     $('<p></p>', { text: v }).insertBefore(i); 
    } 

    $(this).toggleClass('search'); 
});

CSS

p + input { display: none; }

, если нажать два раза на кнопку поиска вы можете показать снова и обновить вход

источник

2012-04-03 09:52:29 fcalderan

Образец

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" > 
function fillTextBox(){ 
var box = $("#box"); 
box.val("Hello World"); 
} 
</script> 
</head> 
<body> 
<input id="box" type="text" class="input-txt-xxxsml left" id="txt-pickup-hn" name="txt-pickup-hn" tabindex="1" value="" /> 
<button name="btn-row-wrapper" OnClick="fillTextBox()" >Search</button> 
</body> 
</html>

источник

2012-04-03 09:52:50 Billybonks

JQuery - Измените текстовое поле на текст при нажатии

ответ

Смежные вопросы