Question

我正在尝试切换div，以便在用户将文本输入textarea时显示和隐藏。我使用下面的代码，它不适合我，任何人都可以告诉我为什么？感谢

HTML：

<head>
<script>
$(document).ready(function() {
   $("#cname").keyup(function() {
        if ($("#cname").val() > 8) {
             $('#cname2').toggle("slow");
        }
   });
});
</script>

</head>

<form>

<input type="text" id="cname" name="cname" class="field">
<div id="cname2"></div>
</form>

的CSS：

#cname2{
width:30px;
height:30px;
position:absolute;
margin-top:-13px;
margin-left:400px;
background-image: url('tick.png');
background-repeat:no-repeat;
background-position:right;
display:none;

}

所以显然我的上面的代码在IE 9中不起作用，但我应该能够通过使用这个代码实现我想要做的事情，但有人可以告诉我在哪里放置我的div ID /我如何适应它为我工作？

var activeElement = null;
var activeElementValue = null;

// On focus, start watching the element
document.addEventListener("focusin", function(e) {
    var target = e.srcElement;
    if (target.nodeName !== "INPUT") return;

    // Store a reference to the focused element and its current value
    activeElement = target;
    activeElementValue = target.value;

    // Listen to the propertychange event
    activeElement.attachEvent("onpropertychange", handlePropertyChange);

    // Override .value to track changes from JavaScript
    var valueProp = Object.getOwnPropertyDescriptor(
            HTMLInputElement.prototype, 'value');
    Object.defineProperty(activeElement, {
        get: function() { return valueProp.get.call(this); },
        set: function(val) {
            activeElementValue = val;
            valueProp.set.call(this, val);
        }
    });
});

// And on blur, stop watching
document.addEventListener("focusout", function(e) {
    if (!activeElement) return;

    // Stop listening to propertychange and restore the original .value prop
    activeElement.detachEvent("onpropertychange", handlePropertyChange);
    delete activeElement.value;

    activeElement = null;
    activeElementValue = null;
});

function handlePropertyChange(e) {
    if (e.propertyName === "value" &&
            activeElementValue !== activeElement.value) {
        activeElementValue = activeElement.value;
        // Fire textchange event on activeElement
    }
};

Answer 1

一种可能的方法（demo）：

$(document).ready(function() {
   $("#cname").on('input', function() {
       $('#cname2')[this.value.length > 8 ? 'hide' : 'show']('slow');
   });
});

这里我假设在cname2容器中有一些警告消息，如果文本输入的 length 是8个或更少字符，则必须显示该消息。另请注意，我使用了oninput处理程序，而不是keyup：因为它允许我处理鼠标驱动的剪切和粘贴以及直接输入。唯一的缺点是IE8不支持这个事件（并且IE9对它的支持相当错误，因为当从文本输入删除字符时，处理程序不会被触发）。

Answer 2

$(document).ready(function() {
       $("#cname").keyup(function() {
            if ($("#cname").val().length > 8) {
                $('#cname2').show();
            } else {
                $('#cname2').hide();
            }
       });
    });

Answer 3

使用此Javascript函数

var z = document.getElementById('cname');

z.onkeyup = function(){
    document.getElementById('cname2').innerHTML = z.value;
}

您的HTML：

<input type='text' name='cname' class='field' id='cname'>

    <div class='cname2' id='cname2'></div>

结帐处：http://jsfiddle.net/iamsajeev/Q9LPv/

Answer 4

尝试以下脚本：

$(document).ready(function() {
   $("#cname").keyup(function() {
       if ($("#cname").val().length > 8) {
             $('#cname2').toggle("slow");
        }
   });
});

Answer 5

    $(document).ready(function() {
       $("#cname").keyup(function() {
            if ($("#cname").val() > 8) {
                 $('#cname2').fadeIn("slow");
            }
           else
           {
                 $('#cname2').fadeOut("slow");
           }
       });
    });

http://jsfiddle.net/5EjP7/2/

我希望有帮助

当用户将文本输入文本区域时显示/隐藏div？

5 个答案: