Question

我有一个输入字段，我想在移动和桌面上使用Jquery Mobile制作。

这是一个数量选择器字段，因此根据输入类型，用户只需输入一个数字或点击增量到1,2,3，......他想要的数字。

问题：有没有办法通过按钮将输入类型=“按钮”切换为输入类型=“文本”？

这样的事情：

$('.switchInputType').click(function () {
  $(this).val() == "click" ? go_type() : go_click();
});
function go_type() {
  $('.switchInputType').val('type');
  $('.inputElement').attr('type', 'text');
}
function go_click() {
  $('.switchInputType').val('click');                                      
  $('.inputElement').attr('type', 'button'); 
}

这不起作用？我正在寻找其他想法如何实现这一目标？

是否有可能篡改JQM生成的HTML，如

<input type="button" value="clickMe" />

JQM中的

看起来像这样：

<div class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" 
data-theme="c"  aria-disabled="false">
   <span class="ui-btn-inner ui-btn-corner-all">
       <span class="ui-btn-text">clickMe</span> 
   </span>
   <input class="inputElement ui-btn-hidden" type="button" value="clickMe"
    aria-disabled="false" />
</div>

感谢您的想法！

这是在Jquery Mobile中切换输入的完整代码：

$('.switchInputType').click(function () {
  $(this).val() == "click" ? go_type() : go_click();
});
function go_type() {
 $('.switchInputType').val('type');
 $('.switchInputType').prev('span').html('<span class="ui-btn-text">type</span><span class="ui-icon ui-icon-finger ui-icon-shadow"></span>');
 $('.inputElement').each(function(index) {
    $(this).parent('div').replaceWith('<input type="text" value="'+this.value+'" 
    name="'+this.name+'" id="'+this.id+'" value="'+this.value+'" class="inputElement
    ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" />');
    });
 }
 function go_click() {
   $('.switchInputType').val('click');
   $('.switchInputType').prev('span').html('<span class="ui-btn-text">click</span><span
   class="ui-icon ui-icon-finger ui-icon-shadow"></span>');
   $('.inputElement').each(function(index) {
      $(this).replaceWith('<div class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow 
      ui-btn-up-c" data-theme="c" aria-disabled="false"><span class="ui-btn-inner ui-btn-
      corner-all"><span class="ui-btn-text">'+this.value+'</span></span><input 
      type="button" value="'+this.value+'" name="'+this.name+'" id="'+this.id+'" 
      value="'+this.value+'" class="inputElement ui-btn-hidden" data-inline="true" 
      aria-disabled="false" /></div>');
      });
  }

Answer 1

无法更改类型，因为它是只读的。你能做的就是这样：

JSFIDDLE

$('.clicker').bind('click', function() {
    $(this).replaceWith('<input type="text" value="'+this.value+'" id="'+this.id+'">');
});

Answer 2

$('<input type="text" name="" id="" />').insertAfter('input[type=button]');
$('input[type=button]').remove();

//您可以收集您需要的属性，将它们分配给新的输入顶行，否则由于type=""属性

的安全原因，您永远无法使其工作

jquery更改输入类型

2 个答案: