javascript - 如何立即查看输入中的文本

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>

工具：

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 : '???');
});

演示在这里