使用jquery将输入字段转换为文本

Convert input field to text with jquery?

本文关键字：转换 文本 字段 输入 jquery 使用      更新时间：2023-09-26

我需要将<input type="text" value="1" class="simpleCart_input">转换为纯文本。

就像我需要它像一样

<span class="simpleCart_input">1</span>

但是怎么做呢？

您可以使用replaceWith。

$('.simpleCart_input').replaceWith(function(){
   return '<span class='+this.className+'>'+this.value+'</span>'
})

http://jsfiddle.net/fsVRe/

或：

$('.simpleCart_input').replaceWith(function(){
    return $('<span/>', {
              'class': this.className,
               text: this.value
           })
})

尝试使用此功能：工作演示http://jsfiddle.net/gvRjn/

http://www.appelsiini.net/projects/jeditable/default.html

希望它符合你的事业:)

p.S.-这是使用http://www.appelsiini.net/projects/jeditable插件。

代码

$('.editable-element').editable({
    width: 250,
    indicator: 'Saving...'
});

​

您可以这样做：

$("input.simpleCart_input").replaceWith(function () {
  return '<span class="'+this.className+'">'+this.value+'</span>';
});​

工作演示

HTML 

<span>
    <input type="text" class="simpleCart_input">
</span>​

jQuery

$('.simpleCart_input').blur(function() {
    var val = $.trim(this.value);
    $(this).parent().attr('class', $(this).attr('class')).html(val);
});​

演示

另一个

$('.simpleCart_input').blur(function() {
    var val = $.trim(this.value);
    if( val ) 
    {
      $(this).wrap($('<span/>', {
        'class': $(this).attr('class'),
         html: val
      })).remove();
    }
});​

DEMO

如果我理解正确，应该这样做：

var a = $('.simpleCart_input').html();
alert(a);

根据你的评论，你想要这个：

var a = $('.simpleCart_input').val();
$('.simpleCart').text(a);

（为了让代码达到它的目的，你需要一个带有simpleCart类的跨度。）

最终建议：

只是为了添加转换代码。这将删除输入字段并插入具有所需值的跨度。

$('.simpleCart_input').replaceWith(
    return '<span class='+this.className+'>'+this.value+'</span>'
);

您的意思是获取输入字段的值吗？如果是：

var val=$（'.simpleCart_input'）.val（）
警报（val）；

var input = $('.simpleCart_input');
input.replaceWith(
    $('<span>').text(  // Uses text() to avoid breakage if the value contains HTML special characters.
        input.val()
    )
);

其实很简单：

首先，您需要识别输入，因此我们将为其添加一个id:

 <input id="my-input" type="text" value="Lorem ipsum" />

然后我们可以用文本代替输入，比如：

 var input = $('#my-input'),          // cache input
     value = input.attr('value'),  // read input value
     span  = $('<span></span>);    // create a span element     
 span.text(value); // Place the value inside the span     
 input.after(span); // Place the span after the input     
 input.remove(); // Remove the input since this was our mission

这应该完成以下工作：）

相关文章：