如何将用户输入的文本拆分为单个字符？
如何将用户输入的文本拆分为单个字符？
提问于 2016-02-29 18:00:28
我想让用户能够拖动他们在屏幕周围输入的每个字符。
我不太确定如何访问用户输入的各个字符。
在下面的例子中，我能够操纵"placemark“的每个字符。如何对用户输入的文本执行此操作？
HTML
<!doctype html>
<html>
<head>
<title>My project</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="character">P</div>
<div class="character">l</div>
<div class="character">a</div>
<div class="character">c</div>
<div class="character">e</div>
<div class="character">m</div>
<div class="character">a</div>
<div class="character">r</div>
<div class="character">k</div>
<br><br>
<form action="demo_form">
Word: <input type="text" name="fname"><br>
</form>
</body>
</html>CSS
.character {
width: 10px; height: 15px;
font-size: 50px;
display: inline;
}Jquery
$( init );
function init() {
$('.character').draggable();
}回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-29 18:36:59
如果我没听错你的话，这就行了。只需在框中键入某些内容，然后单击按钮进行测试。
基本上，我们这样做的方式是：
- 获取用户的输入，并将其溢出到字符数组中。
- 加入数组的方式，它包装每个字符在一个元素(span，div .(随便什么)
- 将这些元素添加到DOM中
- 在添加的项目集上调用
.draggable()
function initDragable($elements) {
$elements.draggable();
}
initDragable($('.character'));
$(function(){
$('#make-word').click(function() {
var $this = $(this);
var letters = $('#my-word').val().split('');
letters = '<div class="character">'+letters.join('</div><div class="character">')+'</div>';
initDragable($('#word-container').html(letters).find('.character'));
});
});.character {
width: 10px;
height: 15px;
font-size: 50px;
display: inline;
cursor: drag;
}<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<div id="word-container">
<div class="character">P</div>
<div class="character">l</div>
<div class="character">a</div>
<div class="character">c</div>
<div class="character">e</div>
<div class="character">m</div>
<div class="character">a</div>
<div class="character">r</div>
<div class="character">k</div>
</div>
<br>
<br>
<form action="demo_form">
Word:
<input type="text" id="my-word" name="fname">
<br>
<button type="button" id="make-word">Make word</button>
</form>
Stack Overflow用户
发布于 2016-02-29 18:09:32
您不能真正做到这一点，输入并没有赋予您单独处理每个字符的能力(除非您通过.keypress()触发器通过jQuery进行黑客攻击)。
我建议使用<button>，它每次都会创建一个可拖放的元素：<div class="character">。
或
下面的示例演示如何获取您键入的最后一个字符并将其转换为可拖放元素：
$('input[type="text"]').keypress(function() {
var lastCharacter = $(this).val().slice(-1);
$('body').append('<div class="draggable">'+lastCharacter +'</div>');
//make element draggable
$('.draggable').draggable();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35706324
复制相关文章
相似问题
腾讯云开发者
