Question

如何在完成输入编辑后激活readonly？

这是我现在的代码：

<script type="text/javascript">
$(document).ready(function () {
         $("input").bind('click focus', function(){
                $('input').each(function(){
                        $(this).attr("readonly", false);
                        });
                });
         });
</script>

这样的输入：

<input type="text"  class="m" readonly="readonly" id="anchor_text">

我认为有焦点的东西，我需要在我转到下一个输入时将readonly放回去，所以编辑的输入不能改变，除非我再次点击它。

Answer 1

尝试：

$("input").bind('click focus', function(){
     $(this).attr("readonly", false);
  }).bind('blur', function(){
     $(this).attr("readonly", true);
 });

演示：http://jsfiddle.net/DkCvu/1/

Answer 2

对不起，但我很难看清楚这一点。如果我做对了，你想要输入字段 not 是可编辑的，直到用户点击或选择它为止（这基本上是输入字段无论如何工作：你不能改变它们的值，除非你选择它们）。在这些输入字段失去焦点后，它们应该回到只读状态。
如果是这种情况，你就会使事情变得复杂。但是，这不关我的事。完成IMO的最佳方法是委派活动。

因此，我在jQuery上整理了几个关于纯JS的小提琴。两者都远非完美，但应该在你的路上帮助你。

常规JS（fiddle here）：

var dv = document.getElementById('inputDiv');
if (!dv.addEventListener)
{
    dv.attachEvent('onfocusin',switchRO);
    dv.attachEvent('onfocusout',switchRO);
}
else
{
    dv.addEventListener('focus',switchRO,true);
    dv.addEventListener('blur',switchRO,true);
}

function switchRO (e)
{
    var self;
    e = e || window.event;
    self = e.target || e.srcElement;
    if (self.tagName.toLowerCase() === 'input')
    {
        switch (e.type)
        {
            case 'onfocusin':
            case 'focus':
                self.removeAttribute('readonly');
            break;
            default:
                self.setAttribute('readonly','readonly');
        }
    }
    return true;
}

在jQuery中，这可能看起来像这样（jQuery with .on，jsfiddle here）：

$('#inputDiv input').on(
    {
        focus: function()
        {
            $(this).removeAttr('readonly');
        },
        blur: function()
        {
            $(this).attr('readonly','readonly');
        }
    });

我发布了jQuery和纯JS，因为我发现它既有信息又有教育意义，可以了解jQuery屏幕背后的内容。

在编辑输入jquery后激活readonly

2 个答案: