使用onkeyup事件在输入表单的文本两侧添加方括号 - Adding square brackets to either side of the text on an input form with a onkeyup event?

Adding square brackets to either side of the text on an input form with a onkeyup event?

我希望在输入表单的文本字段中输入文本字符串时，方括号自动出现在文本字符串的两侧。结果需要与onkeyup事件一致。

下面是.php文件中的一段代码:

$generator .= '<div class="plugin_input_wrapper">';
$generator .= 'Enter your text:';
$generator .= '<input class="text-box" type="text" id="plugin_bottom_text" maxlength="25" name="plugin_bottom_text" onkeyup="plugin_text_type();">';
$generator .= '<span class="text">&nbsp Font size:</span><input class="text-box2" type="text" id="plugin_text_font_size" maxlength="2">&nbsp px</div>';

这是可能的内联Javascript吗?

如果在用户打字的时候这样做，会让用户很困惑。一种使其不那么令人惊讶的方法是在焦点丢失(模糊)时添加括号。下面是一个代码片段:

<form>
    <input type="text" onblur="this.value = '[' + this.value + ']'"/>
</form>

下面是实际操作:http://jsfiddle.net/3ZwRL/1/

编辑:PHP应该是这样的:

$generator .= '<form>'
$generator .= '<input type="text" onblur="this.value = ''['' + this.value + '']''"/>'
$generator .= '</form>'

使用jQuery作为快速hack和非常繁琐，但这是一个简单的方法:

$('.plugin_input_wrapper input').on('keyup', function() {
  var oldVal = $(this).val().replace(/'[/g,'');
  oldVal = oldVal.replace(/']/g,'');
  var val = '[' + oldVal + ']';
  $(this).val(val);
});

JSBin

只是获取正在输入的文本框的当前值，删除旧的括号并重新添加它们，然后注入到文本框