Question

我正在开发一个在线预订系统，基本上我希望当用户点击按钮时，文本框会更改为段落文本。基本上，删除文本框只显示插入的值。

这是我要更改的文本框的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>

非常感谢任何帮助！

Answer 1

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>';
   });
});

你应该按顺序给你的按钮一个ID：）

Answer 2

正在努力实现这种效果吗？ 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; }

如果您在搜索按钮上单击两次，则可以再次显示并更新输入

Answer 3

这是一个示例

    <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>

Answer 4

使用该按钮添加一个调用javascript函数的onClick：

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

然后在函数中执行：

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

Jquery - 单击时将文本框更改为文本

4 个答案: