textarea保存原文的空格和回车

本文介绍如何使用PHP处理文本数据,包括保存textarea内容为文件时保持原有格式、展示时还原格式,以及清除HTML标签等。
1.如何把textarea中的内容写到文本中去,保存原文的空格和回车,从文本中读出的时候显示出原文摸样?
<?php 
if($submit) 

    $fp   =   fopen( "test.txt ", "w "); 
    fwrite($fp,$content); 
    fclose($fp); 

?> 
<form   action= " <?=$PHP_SELF;?> "   method= "post "> 
<textarea   cols= "50 "   rows= "10 "   name= "content "> </textarea> 
<input   type= "submit "   name= "submit "   value= "submit "> 
</form> 
<?php 
$fp   =   fopen( "test.txt ", "r "); 
$data   =   fread($fp,   filesize( "test.txt ")); 
fclose($fp); 
//$data=str_replace( "\n\r ", " <br> ",$data); 
$data   =   str_replace( "   ", "&nbsp; ",$data); 
$data   =   stripslashes($data); 
echo   nl2br($data); 
?>
2.PHP中,info是textarea的name,以下几句就可以是用户输入的文本原样显示
      $info=$_POST["info"];
      $info = htmlspecialchars($info);//防止在文本输入代码
      $info = str_replace("\n", "<br>", $info);//将代码转义
      $info = str_replace(" ", "&nbsp;", $info);//将代码转义
    修改文本的时候,要加上$info = str_replace("&amp;", "&", $info);
    因为htmlspecialchars是一个函数,功能是把html标签转化为字符串html
    预定义的字符是:
  &(和号) 成为&amp;
  " (双引号) 成为 "
  ' (单引号) 成为 '
  < (小于) 成为 &lt;
  > (大于) 成为 &gt;
     第二次修改,htmlspecialchars会把文本框中的&,转成&amp;客户预览时,&amp;会转成&nbsp,显示出来。加上这句,在第二次修改时,又会把&amp;转义回来,就不会有问题了。
3.在写采集程序时,往往需要对采集回来的内容进行处理,比如删除HTML代码、去掉多余的空格、删除回车换行字符等等。下面就写一个函数来处理。
function DeleteHtml($str)
{
  $str=trim($str);
  $str=strip_tags($str,"");
  $str=ereg_replace("\t","",$str);
  $str=ereg_replace("\r\n","",$str);
  $str=ereg_replace("\r","",$str);
  $str=ereg_replace("\n","",$str);
  $str=ereg_replace("  ","  ",$str);
  return trim($str);
}
### Vue2 中实现 textarea 禁用空格回车 在 Vue2 的项目中,可以通过监听 `onkeyup` 或者 `input` 事件来动态修改用户的输入内容,从而达到禁用特定字符(如空格回车)的效果。以下是具体的实现方式: #### HTML 结构 通过绑定自定义的 `v-on:keyup` 方法到 `<el-input>` 组件上,可以实时拦截并过滤掉不希望被输入的内容。 ```html <template> <div> <!-- 使用 Element UI 的 el-input --> <el-input type="textarea" v-model="inputValue" @keyup="handleKeyup"> </el-input> </div> </template> ``` #### JavaScript 实现逻辑 在组件的方法部分编写 `handleKeyup` 函数,用于移除用户输入中的空格换行符。 ```javascript <script> export default { data() { return { inputValue: '' // 双向绑定的数据模型 }; }, methods: { handleKeyup(event) { // 移除所有的空格 (包括全角半角) this.inputValue = this.inputValue.replace(/[\s]/g, ''); // 如果需要额外阻止默认行为(例如防止继续输入),可调用 event.preventDefault() if (event.key === 'Enter' || /\s/.test(event.key)) { event.preventDefault(); } } } }; </script> ``` 上述代码实现了以下功能: - 当用户按下键盘时触发 `@keyup` 事件。 - 利用正则表达式 `/[\s]/g` 替换所有空白字符(包括空格、制表符 `\t` 换行符 `\n`)。[^2] - 对于按键为 Enter 或其他空白键的情况,调用了 `event.preventDefault()` 来完全阻止其默认行为。[^4] #### CSS 样式调整 为了确保用户体验一致,在某些情况下可能还需要设置一些样式规则以优化展示效果。 ```css <style scoped> /* 设置多行文本区域内的换行模式 */ textarea { white-space: pre-line; } </style> ``` 此样式的目的是使多行文本框内部能够正常显示已有的换行结构,即使这些换行不会作为有效数据存储下来。[^3] --- ### 总结 以上方案综合运用了 Vue 数据绑定机制以及 DOM 事件处理能力,成功解决了在 Vue2 应用程序中如何限制用户在 `<textarea>` 内部输入非法字符的问题。这种方法不仅简单易懂而且兼容性强,适用于大多数场景需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值