如何即时查看输入内的文本

Question

我见过一些网站使用jquery立即查看输入文本字段中写入的任何文本。

以下是示例： -

我写a时会立即显示=> some_site.com/a

当我写另一封信b时，它会立即显示在=> some_site.com/ab

以及我写的任何内容都会立即显示

但这不是全部！如果我删除任何文本，所以输入字段为空 它显示=> some_site.com/???

这可能有助于在提交整个表单之前查看输入文本

怎么做这么好的效果？

如果html表单代码是

<input type="text" name="txt" id="txt">

〜感谢您的帮助

Answer 1

这是一个工作示例

http://jsfiddle.net/ydzr8/

基本上你希望keyup事件从文本框中获取值

<input type='text' class='input'/> <div class="display">http://www.something/???</div>

然后

$('.input').keyup(function(){
  if($(this).val() === '')
  {
    $('.display').html("http://www.something/???");
  }else{
    $('.display').html("http://www.something/" + $(this).val());
  }
});

Answer 2

由于您在此问题中标记了Mootools，以下是Mootools的方法：

HTML示例：

<input type='text' class='input' />
<div id="result">http://www.mysite.com/<span></span>
</div>

Mootools的：

document.getElement('input').addEvent('keyup', function () {
    var val = this.value ? this.value : '???';
    document.id('result').getElement('span').innerHTML = val;
});

//选项2：

document.getElement('input').addEvent('keyup', function () {
    $$('#result span').set('html', this.value ? this.value : '???');
});

演示here