Question

点击http://jsfiddle.net/18zdmp4b/1/查看结果。在输入中输入值，按Enter键，该值将为border。但是，我想单独对每个单词进行边界处理。如果我输入香蕉，苹果和香蕉应分成两个不同的矩形。我怎样才能做到这一点？升值。

＆＃13;

$( "#input" ).keydown(function( event ) {

   //press Enter key
if ( event.which == 13 ) {
   event.preventDefault();
    
    //put input value into div
var value=$('#input').val();
    $('#test').append(" "+value);
   
   $('#test').css('border-style','solid');
     
}
    
    
});

＆＃13;

.test {display:inline-block;}

＆＃13;

<div class="test" id="test">apple</div>
<input type="text" id="input"/>

＆＃13;

Answer 1

您需要在空格上split value，循环显示单词，并为每个单词创建单独的HTML标记。

$( "#input" ).keydown(function( event ) {
    //press Enter key
    if ( event.which == 13 ) {
        event.preventDefault();
        //put input value into div
        var value = $('#input').val();
        var words = value.split(/\s/);
        for ( var i = 0; i < words.length; i++ ) {
            var word = words[i];
            if ( word ) {
                $('#test').append(' ');//Add the space between tags (optional).
                $('<span></span>')
                    .text(words[i])
                    .css('border-style','solid')
                    .appendTo('#test');
            }
        }
    }
});

.test {display:inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test" id="test">apple</div>
<input type="text" id="input"/>

在这种情况下，如何在jquery中对每个单词进行边界处理？

1 个答案: