Design Studio LEVEL.7

ブログ

最新記事 Wordpress/PHP カスタムフィールドに入力した文字列をスマホだけ改行する

カスタムフィールドに入力した文字列をスマホだけ改行する

ある案件でクライアント側が入力した文字列をスマホで閲覧時に改行したいという要望がありました。

文字列文字列(説明)

パソコンでは改行せずに一行表示で、

文字列文字列
(説明)

スマホではカッコの前で改行させたいということです。

カスタムフィールドの入力欄は<input type=”text”>で作ってあり、スマホ用にもう一つ入力欄を作ってもいいのですが、入力方法を指定するとクライアント側から拒否られる可能性もあるうえ、カッコが入る場合と入らない場合もあり、どうしようかと一瞬悩んだのですが、すぐに解決策が思いつき、以下のような対処で落ち着きました。

↑始まりのカッコを検索して、見つかれば

<br>(

に置き換える。これだけ。

あとはこれをjsでスマホになったら動かせばOK。

var str = "文字列文字列(説明)";
var newstr = str.replace(/(/g, "<br>(");
var newstr = newstr.replace(/\(/g, "<br>(");

replaceが2つあるのはカッコが全角か半角かでチェックするのが面倒なので2つ併記しています。

これで入力欄はひとつで、スマホのときだけ改行できるようになりました。
jqueryで簡単に書くとこんな感じです。

$('適当なクラス').each(function() {
var str = $(this).text();
var newstr = str.replace(/(/g, "<br>(");
var newstr = newstr.replace(/\(/g, "<br>(");
$(this).html(newstr);
});

コメントを残す

コメントは承認後に反映されます。
承認には数日かかる場合があります。