Question

我需要能够根据输入字段中实时输入的字母呈现div（可能有延迟吗？

示例是否有一种类型：输入字段中的“House”

我需要这样的东西才能显示

<div id="h"></div>
<div id="o"></div>
<div id="u"></div>
<div id="s"></div>
<div id="e"></div>

同样输入/删除divs update

似乎很简单但我还在学习......

编辑：div将隐藏在页面上，因为应该显示字母的人类型，如果删除了字母，则div应该被隐藏。

Answer 1

这个怎么样......

HTML：

<div id="input">
    <input id="caret" autofocus>
</div>

JavaScript的：

$( input ).click( function () {
    $( caret ).focus();
});

$( caret ).keydown( function ( e ) {
    var that = this;

    if ( e.which === 8 ) { // BACKSPACE
        $( caret ).prev().remove();
    } else if ( e.which === 46 ) {// DEL
        $( caret ).next().remove();
    } else if ( e.which === 37 ) { // ARROW LEFT
        $( caret ).prev().before( caret );
        $( caret ).focus();
    } else if ( e.which === 39 ) { // ARROW RIGHT
        $( caret ).next().after( caret );
        $( caret ).focus();
    } else {
        setTimeout( function () {
            keydownHandler.call( that, e );
        }, 0 );
    }    

});

function keydownHandler( e ) {
    if ( caret.value.length > 0 ) {
        $( '<div>' ).text( this.value ).insertBefore( caret );
        caret.value = '';
    }
}

现场演示： http://jsfiddle.net/R7Q56/4/show/

Answer 2

如果你有以下html

<input type="text" name="text" />
<div id="letters"></div>

然后，当您按下a-z中的任意键时，以下代码应在div div中插入新的#letters，它还会检查id已经不存在。

$(document).ready(function() {
    $('#text').keyup(function(e) {
       if(/[a-zA-Z]/.test(String.fromCharCode(e.keyCode)) && $('#letter_'+e.keyCode).length == 0) {
            $('#letters').append('<div id="letter_'+e.keyCode+'">'+this.value.charAt(this.value.length-1)+'</div>');
       }
    });
});

Answer 3

创建一个输入框以收集您的信件：

 <input type="text" value="" id="MyLetter">

创建你的div以显示和隐藏：

 <div class="MyDiv" id="h"></div>
 <div class="MyDiv" id="o"></div>
 <div class="MyDiv" id="u"></div>
 <div class="MyDiv" id="s"></div>
 <div class="MyDiv" id="e"></div>

创建jQuery：

 $("#MyLetter").keyup(function() {

     // COLLECT THE LETTER
     var MyLetter = $("#MyLetter").val();
     // HIDE THE OTHER DIVS
      $(".MyDiv").hide();
      // SHOW THE SPECIFIC LETTER DIV
     $("#"+MyLetter).show();

 }):

需要为每个字母输入一个div

3 个答案: